頁(yè)面布局中最常見(jiàn)的需求就是元素或者文字居中了，但是根據(jù)場(chǎng)景的不同，居中也有簡(jiǎn)單到復(fù)雜各種不同的實(shí)現(xiàn)方式，本篇就帶大家一起了解下，各種場(chǎng)景下，該如何使用 CSS 實(shí)現(xiàn)居中

前言

頁(yè)面布局中最常見(jiàn)的需求就是元素或者文字居中了，但是根據(jù)場(chǎng)景的不同，居中也有簡(jiǎn)單到復(fù)雜各種不同的實(shí)現(xiàn)方式，有的特定場(chǎng)景下可能還有一些稀奇古怪的bug，本篇就帶大家一起了解下，各種場(chǎng)景下，該如何使用 CSS 實(shí)現(xiàn)居中

場(chǎng)景分類(lèi)

根據(jù)應(yīng)用場(chǎng)景，我們把居中的需求分為與盒子相關(guān)的居中和內(nèi)容相關(guān)的居中，盒子相關(guān)的居中比較好理解，也是我們比較常見(jiàn)的應(yīng)用場(chǎng)景，內(nèi)容相關(guān)實(shí)際也很常用，只是平時(shí)注意得比較少，但如果對(duì)概念理解不清晰，實(shí)現(xiàn)出來(lái)的效果可能經(jīng)常會(huì)偏差那么一丟丟，然后就開(kāi)始窮舉法解決問(wèn)題了，這里也是我們本次討論的重點(diǎn)

盒子相關(guān)

盒子模型相關(guān)的居中基本上可以根據(jù)盒子有沒(méi)有給定寬高度分為分為兩大類(lèi)

我們先預(yù)設(shè)一下頁(yè)面結(jié)構(gòu)設(shè)置樣式

給定寬高

給定寬高的場(chǎng)景比較簡(jiǎn)單，能獲取到元素的寬高那么直接計(jì)算子元素需要的偏移量就可以了，或者借助表格元table-cell現(xiàn)居中，但是大部分時(shí)候我們遇到的場(chǎng)景是不確定，并且不確定的解決方案可以向下兼容給定寬高的，這里就不過(guò)多贅敘了，直接看下一種情況

寬高不固定

寬高不固定時(shí)，主流的解決方案有兩種，一種是使用彈性布局，另一種是使用定位

• flex 彈性布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

• 相對(duì)定位

.children {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

• 絕對(duì)定位

.parent {
  position: relative;
}

.children {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

基本現(xiàn)在瀏覽器對(duì)彈性布局的支持已經(jīng)很好了，也是主流的居中解決方案，放心用即可

內(nèi)容相關(guān)

提到內(nèi)容，最常想到的就是文字，圖片，icon這些，這些元素的對(duì)齊大部分時(shí)候都是根據(jù)基準(zhǔn)線(xiàn)來(lái)實(shí)現(xiàn)的baseline，可以使用設(shè)置行高line-height（這種方案有瑕疵，后面會(huì)詳細(xì)介紹），文字居中屬性text-align來(lái)實(shí)現(xiàn)，當(dāng)然也可以轉(zhuǎn)換成彈性布局來(lái)實(shí)現(xiàn)居中，都是可以的

這里我們舉一個(gè)稍微特殊點(diǎn)的案例來(lái)進(jìn)行分析，看應(yīng)該如何進(jìn)行居中

結(jié)構(gòu)

樣式

.parent {
  width: 100%;
  height: 100px;
  background-color: aquamarine;
}
.children1 {
  font-size: 42px;
  background-color: red;
}
.children2 {
  font-size: 18px;
  background-color: yellow;
}

方案

• 使用彈性布局

.parent {  display: flex;  justify-content: center;  align-items: center;}

簡(jiǎn)單省心，達(dá)到效果

• 使用 line-height

.parent {  line-height: 100px;  text-align: center;}

這個(gè)時(shí)候就會(huì)發(fā)現(xiàn)，水平方向使用text-align來(lái)居中沒(méi)有問(wèn)題，但是垂直方向出來(lái)的效果就和預(yù)想的有偏差了，我們先來(lái)分析為什么會(huì)這樣

關(guān)于line-height

line-height 等于元素高度的時(shí)候文本并不是真的居中了，而是看著居中了，當(dāng)元素高度和font-size差距較大的時(shí)候，這種不是真正的居中就越發(fā)的明顯

line-height，指的是兩行文字基線(xiàn)之間的距離（這說(shuō)法實(shí)際有點(diǎn)爭(zhēng)議，也可以字面理解就行的高度），如果 line-height 剛好等于盒子的高度，那么意味著基線(xiàn)就在盒子一半的位置，這樣就實(shí)現(xiàn)了內(nèi)容的垂直居中

我們?cè)谟胠ine-height實(shí)現(xiàn)文字垂直居中的時(shí)候，有個(gè)前提，一個(gè)是單行元素，另外沒(méi)有多種內(nèi)聯(lián)元素（不同大小的圖片，文字，icon等等），不然你會(huì)在對(duì)齊內(nèi)聯(lián)元素的時(shí)候遇到很多麻煩

那么如何解決這個(gè)問(wèn)題呢，首先要了解，行內(nèi)元素在垂直方向的定位，是基于什么，先來(lái)看一張圖，可能大家在其它地方也看過(guò)，輔助我們理解

在父元素定義了line-height的條件下，vertical-align的作用是讓?zhuān)╥nline/inline-block）子元素依據(jù)父元素的基點(diǎn)對(duì)齊。

根據(jù)上圖示意，不難看出，不管文字的大小，它們都是基于基線(xiàn)（baseline）來(lái)確定垂直方向的定位（可看helloWorld和世界你好的底部是在同一水平線(xiàn)的）

看到這里有的同學(xué)應(yīng)該就想到了，可以通過(guò)設(shè)置vertical-align修改對(duì)齊方式不就好了嗎？我們來(lái)試試先把世界你好的設(shè)置下vertical-align: middle試一試

可以看到耶，為什么沒(méi)有效果，這時(shí)可能同學(xué)就要急了，但先別急，你在把HelloWorld也設(shè)置一下試試

.children1 {
  font-size: 42px;
  background-color: red;
  vertical-align: middle;
}
.children2 {
  font-size: 24px;
  background-color: yellow;
  vertical-align: middle;
}

這個(gè)時(shí)候效果就出來(lái)了，怎么樣，是不是很神奇~

我們?cè)賮?lái)一起看?vertical-align

vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式。該屬性定義行內(nèi)元素的基線(xiàn)相對(duì)于該元素所在行的基線(xiàn)的垂直對(duì)齊

如果我們只設(shè)置一個(gè)元素的?vertical-align?屬性的化，那么就是后設(shè)置的和前面的對(duì)齊，我們可以把這兩個(gè)大小字體調(diào)換下順序，然后單獨(dú)給HelloWorld設(shè)置middle

可以看到這個(gè)字體是有點(diǎn)向下偏移一點(diǎn)點(diǎn)，原因就是這時(shí)它是跟小字號(hào)的baseline對(duì)齊了

我們同樣把兩個(gè)都設(shè)置成middle再看下

這時(shí)就正常啦~簡(jiǎn)單總結(jié)一下，就是在使用vertical-align這個(gè)屬性進(jìn)行垂直對(duì)齊居中時(shí)，一定要注意，如果有多個(gè)元素，一定要保證他們的基準(zhǔn)線(xiàn)是一致的，這樣才能達(dá)到我們想要的效果