CSS垂直居中的12種實現方式

NO IMAGE

使用絕對定位和負外邊距對塊級元素進行垂直居中

HTML

<div id="box">
<div id="child"></div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
margin: -50px 0 0 0; 
}

CSS垂直居中的12種實現方式

這個方法兼容性不錯,但是有一個小缺點:必須提前知道被居中塊級元素的尺寸,否則無法準確實現垂直居中。

使用絕對定位和transform

HTML

<div id="box">
<div id="child">test vertical align</div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
background: orange;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}

CSS垂直居中的12種實現方式

這種方法有一個明顯的好處就是不必提前知道被居中元素的尺寸了,因為 transformtranslate 偏移的百分比就是相對於元素自身的尺寸而言的。

另外一種使用絕對定位和負外邊距進行垂直居中的方式

HTML

<div id="box">
<div id="child">test vertical align</div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 50%;
height: 30%;
background: orange;
position: absolute;
top: 50%;
margin: -15% 0 0 0;
}

CSS垂直居中的12種實現方式

這種方式的原理實質上和前兩種相同。補充的一點是:margin 的取值也可以是百分比,這時這個值規定了該元素基於父元素尺寸的百分比,可以根據實際的使用場景來決定是用具體的數值還是用百分比。

絕對定位結合margin: auto

HTML

<div id="box">
<div id="child">test vertical align</div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 200px;
height: 100px;
background: orange;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
}

CSS垂直居中的12種實現方式

這種實現方式的兩個核心是:把要垂直居中的元素相對於父元素絕對定位,top和bottom設為相等的值,我這裡設成了0,當然也可以設為 99999px 或者 -99999px 無論什麼,只要兩者相等就行,這一步做完之後再將要居中元素的 margin 屬性值設為 auto,這樣便可以實現垂直居中了。

被居中元素的寬高也可以不設置,但不設置的話就必須是圖片這種自身就包含尺寸的元素,否則無法實現。

使用padding實現子元素的垂直居中

HTML

<div id="box">
<div id="child"></div>
</div>

CSS

#box {
width: 300px;
background: #ddd;
padding: 100px 0;
}
#child {
width: 200px;
height: 100px;
background: orange;
}

CSS垂直居中的12種實現方式

這種實現方式非常簡單,給父元素設置相等的上下內邊距,子元素自然是垂直居中的,當然這時候父元素是不能設置高度的,要讓它自動被填充起來,除非設置了一個正好等於上內邊距+子元素高度+下內邊距的值,否則無法精確垂直居中。

這種方式看似沒有什麼技術含量,但其實在某些場景下也是非常好用的。

設置第三方基準

HTML

<div id="box">
<div id="base"></div>
<div id="child"></div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
}
#base {
height: 50%;
background: orange;
}
#child {
height: 100px;
background: rgba(131, 224, 245, 0.6); 
margin-top: -50px;
}

CSS垂直居中的12種實現方式

這種方式也非常簡單,首先設置一個高度等於父元素高度一半的第三方基準元素,這時該基準元素的底邊線就是父元素縱向上的中分線,做完這些之後再給要垂直居中的元素設置一個 margin-top 屬性,值的大小是它自身高度的一半取負,則實現垂直居中。

使用flex佈局

HTML

<div id="box">test vertical align</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}

CSS垂直居中的12種實現方式

這種方式同樣適用於塊級元素:

HTML

<div id="box">
<div id="child"></div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}
#child {
width: 300px;
height: 100px;
background: orange;
}

CSS垂直居中的12種實現方式

flex佈局請參考阮一峰《felx佈局教程》

flex也就是flexible,意為靈活的、柔韌的、易彎曲的。

元素可以通過設置 display:flex; 將其指定為 flex 佈局的容器,指定好了容器之後再為其添加 align-items 屬性,該屬性定義項目在交叉軸(這裡是縱向軸)上的對齊方式,可能的取值有五個,分別如下:
  

  • flex-start::交叉軸的起點對齊
  • flex-end:交叉軸的終點對齊
  • center:交叉軸的中點對齊
  • baseline:項目第一行文字的基線對齊
  • stretch(該值是默認值):如果項目沒有設置高度或者設為了auto,那麼將佔滿整個容器的高度

第二種使用彈性佈局的方式

HTML

<div id="box">
<div id="child"></div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
#child {
width: 300px;
height: 100px;
background: orange;
}

CSS垂直居中的12種實現方式

這種方式也是首先給父元素設置 display:flex; 設置好之後改變主軸的方向 flex-direction: column; 該屬性可能的取值有四個,分別如下:
  

  • row(該值為默認值):主軸為水平方向,起點在左端
  • row-reverse:主軸為水平方向,起點在右端
  • column:主軸為垂直方向,起點在上沿
  • column-reverse:主軸為垂直方向,起點在下沿

justify-content 屬性定義了項目在主軸上的對齊方式,可能的取值有五個,分別如下(具體的對齊方式與主軸的方向有關,以下假定主軸方向為默認的從左到右):

  • flex-start(該值是默認值):左對齊
  • flex-end:右對齊
  • center:居中對齊
  • space-between:兩端對齊,各個項目之間的間隔均相等
  • space-around:各個項目兩側的間隔相等

使用 line-height 對單行文本進行垂直居中

HTML

<div id="box">test vertical align</div>

CSS

#box{
width: 300px;
height: 300px;
background: #ddd;
line-height: 300px;
}

CSS垂直居中的12種實現方式

要注意的是,line-height (行高) 的值不能設為 100%,我們來看看官方文檔中給出的關於 line-height 取值為百分比時候的描述:“基於當前字體尺寸的百分比行間距”。也就是說,這裡的百分比並不是相對於容器元素尺寸而言的,而是相對於字體尺寸。

使用 line-heightvertical-align 對圖片進行垂直居中

HTML

<div id="box">
<img src="smallpotato.jpg">
</div>

CSS

#box{
width: 300px;
height: 300px;
background: #ddd;
line-height: 300px;
}
#box img {
width: 200px;
height: 200px;
vertical-align: middle;
}

CSS垂直居中的12種實現方式

vertical-align 並不像看起來那樣天真無邪,深入研究請參考張鑫旭 我對CSS vertical-align的一些理解與認識

本例具體的實現原理請參考張鑫旭 CSS深入理解vertical-align和line-height的基友關係

使用 display: table;vertical-align: middle; 對容器裡的文字進行垂直居中

HTML

<div id="box">
<div id="child">test vertical align</div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}

CSS垂直居中的12種實現方式

vertical-align 屬性只對擁有 valign 特性的 html 元素起作用,例如表格元素中的 <td> <th> 等等,而像 <div> <span> 這樣的元素是不行的。

valign 屬性規定單元格中內容的垂直排列方式,語法:<td valign="value">,value的可能取值有以下四種:

  • top:對內容進行上對齊
  • middle:對內容進行居中對齊
  • bottom:對內容進行下對齊
  • baseline:基線對齊

關於 baseline:基線是一條虛構的線,在一行文本中,大多數字母以基線為基準。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果在文本的字號各不相同時效果會更好,請看下例:

HTML

<div id="box">
<div class="child">glory</div>
<div class="child">glad</div>
<div class="child">align</div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
display: table;
}
.child {
display: table-cell;
vertical-align: top;
border-right: 1px solid orange;
}
.child:first-child {
font-size: 30px;
}
.child:last-child {
font-size: 50px;
}

CSS垂直居中的12種實現方式

如果將 vertical-align 屬性的值修改為 baseline,效果更好:

CSS垂直居中的12種實現方式

使用 CSS Grid

HTML

<div id="box">
<div class="one"></div>
<div class="two">target item</div>
<div class="three"></div>
</div>

CSS

#box {
width: 300px;
height: 300px;
display: grid;
}
.two {
background: orange;
}
.one, .three {
background: skyblue;
}

CSS垂直居中的12種實現方式

這種場景下使用 Grid Layout 非常方便,只需要設置 .one .three 兩個輔助元素即可,只是 Grid 佈局現在瀏覽器支持度還比較低。

使用 CSS Grid 設置水平居中

HTML

<div id="box">
<div></div>
<div class="two">target item</div>
<div></div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.two {
background: orange;
}

CSS垂直居中的12種實現方式

同樣的添加兩個輔助元素,然後將 grid-template-columns 屬性值設置為 1fr 1fr 1fr,意為三列子元素等分全部可用寬度。

也會有這樣的場景,需要被居中的元素寬度已知,則:

HTML

<div id="box">
<div></div>
<div class="two">target item</div>
<div></div>
</div>

CSS

#box {
width: 300px;
height: 300px;
background: #ddd;
display: grid;
grid-template-columns: 1fr 211px 1fr;
}
.two {
background: orange;
}

CSS垂直居中的12種實現方式

#box 裡的第一個 div 和最後一個 div 會平分全部剩餘可用寬度,作為自身的寬度,即 (300px – 211px) / 2,各自 44.5px。

相關文章

帶你走進Android之基礎篇文件解壓縮

你知道支付寶容器化架構是怎麼搭建的嗎?

關於三次握手與四次揮手的那些事,你真的明白了嗎?不看後悔系列

webpack編譯優化