不定元素寬高用css實(shí)現(xiàn)內(nèi)容水平和垂直都居中

Chao 發(fā)布于2019-08-30 15:52 / 2968人閱讀

摘要：在開發(fā)中經(jīng)常遇到這個(gè)問題，即讓某個(gè)元素的內(nèi)容在水平和垂直方向上都居中，內(nèi)容不僅限于文字，可能是圖片或其他元素。這篇文章就來總結(jié)一下都有哪些方法可以實(shí)現(xiàn)水平和垂直都居中。表示這些元素將相對(duì)于本容器水平居中，也是同樣的道理垂直居中。

在開發(fā)中經(jīng)常遇到這個(gè)問題，即讓某個(gè)元素的內(nèi)容在水平和垂直方向上都居中，內(nèi)容不僅限于文字，可能是圖片或其他元素。而且我們希望不要涉及寬度和高度，也就是說，我們不知道父元素的寬高，也不知道內(nèi)容元素的寬高。這篇文章就來總結(jié)一下都有哪些方法可以實(shí)現(xiàn)水平和垂直都居中。

不適合的方案 text-align和line-height

顯然，使用text-align和line-height的方式更適合單排文字，而不適合本文的需求。特別是line-height，無法保證在不知道高度的情況下還能垂直居中。而且就算是文字，我們也不知道文字有多少行。

position:absolute、50%和margin:-px

絕大多數(shù)情況下，我們可以考慮這種方案，讓想要居中的元素通過定位和margin為負(fù)值進(jìn)行偏移的方法讓它在垂直方向上居中。這種方案不要求父元素的高度，也就是即使父元素的高度變化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一樣的操作。但是這里有一個(gè)問題，就是我們的需求往往是內(nèi)部的這個(gè)元素的寬度高度也不確定，比如是一段文字，你無法保證這段文字的字?jǐn)?shù)多少，所以通過margin為負(fù)值來偏移在這種情況下行不通。

position:fixed、0和margin:auto

當(dāng)我們要制作一個(gè)modal dialog彈出框時(shí)，比如彈出居中于屏幕的廣告或登錄框。這個(gè)時(shí)候可以考慮一些相對(duì)于窗口或網(wǎng)頁居中的方案。




 this is a box fixed in center of screen

這里面最重要的是margin: auto;，對(duì)于塊級(jí)元素而言，確定了自己的寬度之后，margin:auto可以幫助它居中，即使在position:fixed時(shí)。不過必須規(guī)定要居中的元素的寬高度，無法滿足我們的需求。

position:absolute、0和margin:auto

上面的fixed方案只適合在整個(gè)窗口實(shí)現(xiàn)居中。fixed會(huì)使元素脫離網(wǎng)頁，因此在內(nèi)容流中還是不適用。在內(nèi)容流中也想實(shí)現(xiàn)居中，可以如下：

 


    This is a p
    



















    
        this is a box fixed in center of screen

首先是仿造上面一個(gè)方法，使用margin:auto，只不過使用absolute。使用absolute定位的話，父級(jí)元素必須也具有position（不為static）。所以把.inner放在一個(gè)有position的父級(jí)元素.container。這樣.inner相對(duì)于.container就是居中的（前提還是.inner要有寬高）。接下來的問題就是怎樣讓.container具備和內(nèi)容相同的高寬，通過.container的父級(jí)元素為position:relative，.container為absolute，再使用100%使.container和父級(jí)元素寬高相同即可。同理因?yàn)橐O(shè)定寬高，所以不滿足我們的需求。

正確的方案 display:table和vertical-align:middle

這個(gè)方案是理解上最容易的，因?yàn)閠able具備垂直居中的屬性，所以很容易通過屬性就能實(shí)現(xiàn)。




  
    you own content

這種情況下，我們可以通過隨意改變.inner的寬高，當(dāng)內(nèi)部的內(nèi)容仍然保持居中狀態(tài)。

DEMO

position:absolute、50%和translate

在css3里面提供了translate函數(shù)，它的主要作用是位移，傳給transform屬性。




  
    your own content

html代碼和上面一樣。translate(-50%, -50%)將會(huì)將元素位移自己寬度和高度的-50%。這種方法其實(shí)和最上面被否定掉的margin負(fù)值用法一樣，可以說是margin負(fù)值的替代方案。這樣你就非常容易理解了。這個(gè)方法最厲害的地方是不需要確定.inner的寬高，而.container的寬高也不需要手動(dòng)設(shè)置，如果它自己本身就被撐大的話。這里只是為了演示方便，才特意給它設(shè)置了寬高。

DEMO

vw vh和translate

vh和vw是兩個(gè)比較偏的單位，是指“viewport的height和width的1%”，比如說50vh就是當(dāng)前視口（窗口的高度，實(shí)驗(yàn)中包含了滾動(dòng)條）高度的50%。也就是說1vw將等于和1%的window寬度差不多的值。因此用在fixed的時(shí)候更加適合。




    this is a box fixed in center of screen

其實(shí)和使用50%沒有太大的差別，因?yàn)檫@時(shí)top、left取的50%是相對(duì)于父元素的，和margin、padding不一樣。如果非得要margin的話，就可以從這里衍生出變體：

 .inner2 {
   position:fixed;
   top: 0;
   left: 0;
   margin: 50vh 0 0 50vw;
   transform: translate(-50%, -50%);
 }

vh vw只能從窗口的大小去考慮，不適合正常的文本流。不過有的時(shí)候可以非常有用，特別是在做全屏應(yīng)用的時(shí)候，比如full page。我把兩種方案都放在了演示中，你可以在DEMO查看。

DEMO

:before和display:inline-block

這也是一種處理方式，通過偽類:before在元素內(nèi)增加新元素后在用display:inline-block，通過高度的處理得到想要的效果。




    
        this is a box fixed in center of screen
The second line

這個(gè)方案是比較特別一些，不是很好理解。首先，.container水平居中沒問題。接著，給.container偽類:before設(shè)定為height:100%，這樣可以用一個(gè)偽元素在.container獲得與父元素等高的空間。然后用inline-block和vertical-align: middle改變對(duì)齊的基線，關(guān)于這一點(diǎn)，我也不甚懂，這里有一篇文章可以參考。通過:before之后，.container內(nèi)的行級(jí)元素的對(duì)齊基線就跑到居中的位置，也就實(shí)現(xiàn)了垂直居中對(duì)齊。這個(gè)時(shí)候，如果里面僅一排文字，其實(shí)可以不用.inner，但是上面的例子里面有一個(gè)
，這就不一樣了。如果直接把文字放在.container里面，
之前的文字會(huì)基于:before基線，會(huì)保持垂直對(duì)齊的狀態(tài)。但是
之后的文字會(huì)另起一行，這一行將起始于:before的下一行，所以會(huì)在:before的100%高度下面，導(dǎo)致被頂出.container。但是如果把文字放在.inner里面，再讓.inner為inline-block，就可以使.inner和:before處于同一基線，這樣就讓整個(gè).inner處于垂直居中的狀態(tài)。

DEMO

css3 display:flex

css3新增了布局相關(guān)的屬性，其中flex布局可以非常簡(jiǎn)單地幫我們實(shí)現(xiàn)我們想要的效果。




    
        this is a box fixed in center of screen
The second line

簡(jiǎn)單解釋一下，當(dāng)display: flex時(shí)，表示該容器內(nèi)部的元素將按照flex進(jìn)行布局。align-items: center表示這些元素將相對(duì)于本容器水平居中，justify-content: center也是同樣的道理垂直居中。對(duì).container賦予了這些樣式之后，作為它的內(nèi)部元素.inner自己自覺的居中了。而且這里你會(huì)發(fā)現(xiàn)，由于沒有使用text-align: center，.inner里面的文字是不會(huì)居中的，也就是說僅僅.inner這個(gè)容器居中而已。

DEMO

總結(jié)

從上面的幾種可行的方案，大致可以分為兩類：display對(duì)齊方案、translate位移方案。display方案是充分發(fā)揮css的布局特性，利用布局和UI引擎的特性來控制布局中的對(duì)齊方式。而translate方案則是利用位移，通過先50%的位移，可以是通過position，也可以是通過margin vw vh，但是完成之后，在通過translate把元素拉回去，之所以用translate而不是margin是因?yàn)閠ranslate是相對(duì)于元素本身，而margin不是。

本文發(fā)表在我的博客 http://www.tangshuang.net/319...
如有疑問或不足之處，請(qǐng)到博客留言