web開(kāi)發(fā)常用的幾種居中形式

zqhxuyuan 發(fā)布于2019-08-21 16:23 / 1759人閱讀

摘要：一水平居中二水平垂直居中三針對(duì)文本內(nèi)容的垂直居中一水平居中要居中的元素有屬性給元素添加代碼演示此外，和產(chǎn)生同樣效果的原因移步要居中的元素沒(méi)有屬性給添加屬性，并在的外面包一層且添加是讓塊狀里面的元素比如文字居中。

一 水平居中
二 水平垂直居中
三 針對(duì)文本內(nèi)容的垂直居中

一水平居中

要居中的元素A有width屬性

給元素A添加 margin：0,auto；(代碼演示)

ps: 此外，margin: auto;和margin:0 auto;產(chǎn)生同樣效果的原因移步

要居中的元素B沒(méi)有width屬性

給B添加display:inline-block屬性，并在B的外面包一層div且添加text-align:center;

ps：text-align:center是讓塊狀里面的元素（比如文字）居中。

要居中的元素C 是絕對(duì)定位的也就是其position為absolute

給C添加margin: auto; top:0; left:0; right:0; bottom:0;以及width和height屬性，并確保C的外層父元素position: relative;

ps:

設(shè)置top,left,bottom,right 屬性把元素充滿(mǎn)了容器，同時(shí)自身指定了寬度，總寬度（固定） = width（固定） + margin-left + margin-right;

當(dāng)margin設(shè)置為auto的時(shí)候，左右邊距會(huì)平分，元素自然就居中了(且是水平垂直居中)

二水平垂直居中： 要居中的元素C沒(méi)有width屬性及height屬性

給C的外層父元素添加display: flex; align-items: center; justify-content: center; 屬性(注意瀏覽器的兼容性)

給C添加margin: auto; 并且確保C的外層父元素 display: flex; (注意瀏覽器兼容性)

ps: flexBox的知識(shí)請(qǐng)移步阮一峰大神的博客

針對(duì)文本內(nèi)容的垂直居中:

父元素有width和height屬性以及text-align: center; 同時(shí)給要居中的元素D添加line-height為父元素的height值

ps: line-height 垂直居中原理請(qǐng)移步

all.

by 潘小閑

GPU云服務(wù)器云服務(wù)器最基本的幾種 html的幾種輪播 js的幾種數(shù)據(jù)類(lèi)型 js緩存的幾種方法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/88476.html

相關(guān)文章

web開(kāi)發(fā)常用的幾種居中形式

摘要：一水平居中二水平垂直居中三針對(duì)文本內(nèi)容的垂直居中一水平居中要居中的元素有屬性給元素添加代碼演示此外，和產(chǎn)生同樣效果的原因移步要居中的元素沒(méi)有屬性給添加屬性，并在的外面包一層且添加是讓塊狀里面的元素比如文字居中。一水平居中二水平垂直居中三針對(duì)文本內(nèi)容的垂直居中一水平居中要居中的元素A有width屬性給元素A添加 margin：0,auto；(代碼演示) showImg(h...

brianway 2019-08-29 13:23 評(píng)論0 收藏0
未知寬度水平居中的幾種方法

摘要：在某些特定的場(chǎng)合，在沒(méi)有知道寬度的情況下卻要求水平居中，前段時(shí)間在寫(xiě)分頁(yè)的時(shí)候碰到了這個(gè)問(wèn)題。但即使我們沒(méi)有設(shè)置的寬度直接設(shè)置的外邊距就可以實(shí)現(xiàn)水平居中了這樣我們就可以通過(guò)設(shè)置水平居中間接使里面的內(nèi)容居中。轉(zhuǎn)自未知寬度水平居中的幾種方法在某些特定的場(chǎng)合，在沒(méi)有知道寬度的情況下卻要求水平居中，前段時(shí)間在寫(xiě)分頁(yè)的時(shí)候碰到了這個(gè)問(wèn)題。當(dāng)時(shí)在網(wǎng)上找了一些解決方法，并選了一個(gè)最合適的方法，現(xiàn)將...

raledong 2019-08-28 18:05 評(píng)論0 收藏0
未知寬度水平居中的幾種方法

摘要：在某些特定的場(chǎng)合，在沒(méi)有知道寬度的情況下卻要求水平居中，前段時(shí)間在寫(xiě)分頁(yè)的時(shí)候碰到了這個(gè)問(wèn)題。但即使我們沒(méi)有設(shè)置的寬度直接設(shè)置的外邊距就可以實(shí)現(xiàn)水平居中了這樣我們就可以通過(guò)設(shè)置水平居中間接使里面的內(nèi)容居中。轉(zhuǎn)自未知寬度水平居中的幾種方法在某些特定的場(chǎng)合，在沒(méi)有知道寬度的情況下卻要求水平居中，前段時(shí)間在寫(xiě)分頁(yè)的時(shí)候碰到了這個(gè)問(wèn)題。當(dāng)時(shí)在網(wǎng)上找了一些解決方法，并選了一個(gè)最合適的方法，現(xiàn)將...

shenhualong 2019-08-01 14:46 評(píng)論0 收藏0
html的幾種水平垂直居中的方式（基礎(chǔ)）

摘要：前言我們?cè)诰帉?xiě)馬過(guò)程中，想必大家對(duì)水平垂直居中的方法了解并不多。所以我給大家總結(jié)式的列出幾種常用的水平垂直居中的方法。前言我們?cè)诰帉?xiě)馬過(guò)程中，想必大家對(duì)水平垂直居中的方法了解并不多。所以我給大家總結(jié)式的列出幾種常用的水平垂直居中的方法。第一種方法 d第一種 .Centered1{ background-color: #800...

Songlcy 2019-08-30 15:44 評(píng)論0 收藏0
面試常見(jiàn)問(wèn)題——垂直居中的幾種方法

摘要：前幾天面試，被問(wèn)到兩次，沒(méi)答好，找到這篇文章收藏學(xué)習(xí)一下，來(lái)自這里做手機(jī)的頁(yè)面，經(jīng)常會(huì)遇到需要垂直居中的情況，這里把常用的垂直居中的幾種方法整理下。（前幾天面試，被問(wèn)到兩次，沒(méi)答好，找到這篇文章收藏學(xué)習(xí)一下，來(lái)自這里）做手機(jī)的頁(yè)面，經(jīng)常會(huì)遇到需要垂直居中的情況，這里把常用的垂直居中的幾種方法整理下。結(jié)構(gòu) 我是垂直居中元素方法1：dispaly:table-cel...

Prasanta 2019-08-28 18:05 評(píng)論0 收藏0