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

呆裡呆氣1發表於2018-01-15
CSS

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

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種實現方式

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

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

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-height 和 vertical-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。

相關文章