css實(shí)現(xiàn)元素居中的N種方法

前言
剛參加工作時(shí)被面試官一連串居中問題虐的體無完膚得場景歷歷在目。“你是如何實(shí)現(xiàn)文本的居中的”“如果是多行文本呢”“塊級元素的水平居中如何實(shí)現(xiàn)”“塊級元素的垂直居中如何實(shí)現(xiàn)”。。。問到后面腦子里一團(tuán)漿糊,本來知道的也不知道該如何回答了。居中是日常工作中不可避免要遇到的場景,面試中也是高頻出現(xiàn)。這次的文章就圍繞這些問題展開,希望能夠幫助有和我當(dāng)年一樣疑惑的同學(xué),在今后的工作和面試中再面對居中問題的時(shí)候可以游刃有余。
行內(nèi)元素居中
文本垂直居中
單行文本垂直居中
單行文本的垂直居中是最簡單的,設(shè)置line-height與盒子高度一樣就可以。
這里有一個誤區(qū),很多人設(shè)置單行文本居中的時(shí)候會同時(shí)設(shè)置height與line-height相同,其實(shí)大可不必設(shè)置height,只設(shè)置line-height就可以,這時(shí)候盒子的高度由line-height撐起來,與line-height完全相同。
.center { // 完全可以不設(shè)置高度 // height: 20px; line-height: 20px; }
多行文本垂直居中
1.vertical-align
vertical-align可以指定行內(nèi)元素的垂直對齊方式。
這個方法需要多增加一個.center元素將需要居中的內(nèi)容包裹起來。設(shè)置父元素的line-height為元素的高度,居中子元素.center的display為inline-block,使其擁有行內(nèi)元素的特性,因?yàn)閘ine-height的繼承性,所以設(shè)置line-height: 20px;重置居中子元素的line-height,然后設(shè)置vertical-align: middle;在行框盒子內(nèi)垂直居中對齊。
<div class="box"> <div class="center"> 雖然你們是扮演路人甲乙丙丁,但是一樣是有生命、有靈魂的。 </div> </div> <style> .box { background-color: orange; line-height: 200px; width: 300px; } .center { background-color: green; line-height: 20px; display: inline-block; vertical-align: middle; } </style>
2.table-cell
不同于行內(nèi)元素設(shè)置利用vertial-align會使當(dāng)前元素垂直居中對齊,table-cell元素設(shè)置vertial-align會讓它的子元素垂直居中對齊,就算子元素是塊級元素也會垂直對齊,所以想要實(shí)現(xiàn)塊級元素的垂直居中也可以使用這個方法。
.box { height: 200px; display: table-cell; vertical-align: middle; }
行內(nèi)元素水平居中
text-align控制子行內(nèi)元素的水平對齊方式,這個非常簡單直接設(shè)置text-align:center就可以。
.center { text-align: center; }
塊級元素水平居中
margin的值為auto可以占據(jù)對應(yīng)方向的所有剩余空間,如果設(shè)置水平方向上兩個方向的margin值都為auto,兩個方向就會平分剩余空間,從而實(shí)現(xiàn)居中。
那么為什么我們從來沒有使用這個方法來實(shí)現(xiàn)垂直方向的居中呢?因?yàn)閍uto值起作用有一個前置條件,就是在對應(yīng)的方向上如果不設(shè)置具體的長度,會自動鋪滿。很顯然width是可以鋪滿父元素的,而height不可以。
.center { margin: 0 auto; }
塊級元素垂直居中
那可不可以利用margin:auto;實(shí)現(xiàn)垂直方向的居中呢?當(dāng)然可以,可以通過修改writing-mode改變塊的流動,使塊橫向流動,此時(shí)height方向就會默認(rèn)平鋪撐滿,設(shè)置margin:auto;就可以實(shí)現(xiàn)垂直方向的居中。但是這個方法有副作用,因?yàn)閣riting-mode屬性的可繼承性,會導(dǎo)致該元素下得所有子元素全部流方向全部變?yōu)闄M向。而且此時(shí)水平方向不能再使用此方法實(shí)現(xiàn)居中了。
<div class="box"> <div class="center"> 雖然你們是扮演路人甲乙丙丁,但是一樣是有生命、有靈魂的。 </div> </div> <style> .box { background-color: orange; height: 200px; writing-mode: vertical-lr;; } .center { background-color: green; height: 50px; margin: auto 0; } </style>
那有沒有可能使用這個特性實(shí)現(xiàn)垂直與水平方向都居中呢?也是可以得,我們繼續(xù)往下看
水平垂直居中
1.position(居中元素寬高固定)
設(shè)置父元素絕對定位,居中元素相對定位,top、right、bottom、left的值都為0,此時(shí)如果不設(shè)置具體的寬高,居中元素就會在水平和垂直兩個方向都鋪滿父元素。此時(shí)再給它設(shè)置具體寬高配合margin:auto;就可以實(shí)現(xiàn)絕對居中了。
需要注意的是這個方法只能兼容IE8及以上瀏覽器,如果項(xiàng)目要兼容IE7可以使用下面這種方法
.box { position: relative; } .center { position:absolute; width: 200px; height: 200px; top:0; bottom:0; left:0; right:0; margin: auto; }
2.vertacal-align
首先實(shí)現(xiàn)居中元素在水平方向上的居中,設(shè)置居中元素的display值為inline-clock,使其擁有行內(nèi)元素的特性。給外層的盒元素設(shè)置text-align: center;使居中元素在水平方向上居中。
然后再實(shí)現(xiàn)在垂直方向上的居中,這個方法需要添加一個輔助元素,設(shè)置輔助元素height:100%;使當(dāng)前行框盒子的高度撐滿父元素,然后設(shè)置vertical-align: middle;使其在垂直方向上居中對齊。
<div class="box"> <div class="assist"></div> <div class="center"> 雖然你們是扮演路人甲乙丙丁,但是一樣是有生命、有靈魂的。 </div> </div> <style> .box { background-color: orange; height: 200px; width: 500px; text-align: center; } .center { background-color: green; width: 150px; display: inline-block; vertical-align: middle; } .assist { display: inline-block; height: 100%; vertical-align: middle; } </style>
3.position配合margin
這個方法適用與居中元素寬高已知的情況。設(shè)置父元素相對定位,居中元素絕對定位,left、top值都為50%,left、top的值分別相對于父元素的寬高計(jì)算,此時(shí)居中元素的左上頂點(diǎn)會位于父元素的正中央。然后再設(shè)置居中元素的margin-left、margin-top為寬高的負(fù)一半,讓居中元素在水平方向相對于自身寬度的50%向左偏移,在垂直方向向上偏移相對于自身高度的50%,就可以實(shí)現(xiàn)居中效果了。
<div class="box"> <div class="center"> 雖然你們是扮演路人甲乙丙丁,但是一樣是有生命、有靈魂的。 </div> </div> <style> .box { background-color: orange; height: 200px; width: 500px; position: relative; } .center { background-color: green; width: 150px; height: 50px; position:absolute; top:50%; left:50%; margin-left: -75px; margin-top: -25px; } </style>
4.position配合transform
第四種方法是使用position配合transform。這種方法跟上一個方法原理上基本相似,但使用場景增加了寬高不固定的元素。一樣的先設(shè)置父元素相對定位,居中元素絕對定位,left、top值都為50%。再設(shè)置居中元素transform: traslate(-50%, -50%);,translate的百分比值是相對于自身去計(jì)算的,讓居中元素在水平方向相對于自身寬度的50%向左偏移,在垂直方向向上偏移相對于自身高度的50%,就可以實(shí)現(xiàn)居中效果了。
<div class="box"> <div class="center"> 雖然你們是扮演路人甲乙丙丁,但是一樣是有生命、有靈魂的。 </div> </div> <style> .box { background-color: orange; height: 200px; width: 500px; position: relative; } .center { background-color: green; width: 150px; position:absolute; top:50%; left:50%; transform: traslate(-50%, -50%); } </style>
5.flex
如果不需要考慮兼容IE9及以前的瀏覽器,flex布局是最推薦的方式。
設(shè)置父元素為flex容器,主軸、交叉軸對齊方式都為居中對。關(guān)于flex的相關(guān)知識可以參考阮大神的博客,介紹的非常詳細(xì)。
.box { display: flex; align-items: center; justify-content: center; }
到此這篇關(guān)于css實(shí)現(xiàn)元素居中的N種方法的文章就介紹到這了,更多相關(guān)css 元素居中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了css實(shí)現(xiàn)元素垂直居中顯示的7種方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)2020-09-04
CSS實(shí)現(xiàn)子元素div水平垂直居中的示例
這篇文章主要介紹了CSS實(shí)現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2020-09-03- 這篇文章主要介紹了css 不定寬高的元素居中布局解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2019-09-18
CSS自適應(yīng)布局實(shí)現(xiàn)子元素項(xiàng)目整體居中,內(nèi)部項(xiàng)目左對齊
這篇文章主要介紹了CSS自適應(yīng)布局實(shí)現(xiàn)子元素項(xiàng)目整體居中,內(nèi)部項(xiàng)目左對齊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們2019-09-03- 這篇文章主要介紹了css常用元素水平垂直居中方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2019-08-09
css實(shí)現(xiàn)元素垂直居中的常用方法(總結(jié))
本文給大家分享幾種方法介紹css實(shí)現(xiàn)元素垂直居中的常用方法,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-01- 在 CSS 中要設(shè)置元素水平垂直居中是一個非常常見的需求了。這篇文章主要介紹了CSS實(shí)現(xiàn)元素居中原理解析,本文分別從行內(nèi)元素和塊級元素進(jìn)行說明,具有一定的參考價(jià)值,感興2018-10-18
- 作為前端攻城師,在制作Web頁面時(shí)都有碰到CSS制作水平垂直居中,我想大家都有研究過或者寫過,特別的其中的垂直居中,更是讓人煩惱,下面這篇文章主要給大家匯總介紹了關(guān)于2017-09-12
css實(shí)現(xiàn)元素水平垂直居中常見的兩種方式實(shí)例詳解
這篇文章主要給大家介紹了css實(shí)現(xiàn)元素水平垂直居中的兩種方式,文中給出了完整的示例代碼供大家參考學(xué)習(xí),對大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值,有需要的朋友們下面來2017-04-23關(guān)于css 行元素和塊元素 相互轉(zhuǎn)換 居中
下面小編就為大家?guī)硪黄P(guān)于css 行元素和塊元素 相互轉(zhuǎn)換 居中。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-05