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

時間 2019-11-16

標籤 css 垂直居中實現方式欄目 CSS 简体版

原文原文鏈接

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

HTMLcss

<div id="box">
    <div id="child"></div>
</div>
複製代碼

CSShtml

#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; 
}
複製代碼

這個方法兼容性不錯，可是有一個小缺點：必須提早知道被居中塊級元素的尺寸，不然沒法準確實現垂直居中。瀏覽器

使用絕對定位和transform

HTMLwordpress

<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%);
}
複製代碼

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

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

HTMLflex

<div id="box">
    <div id="child">test vertical align</div>
</div>
複製代碼

CSSspa

#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;
}
複製代碼

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

絕對定位結合margin: auto

HTMLcode

<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;
}
複製代碼

這種實現方式的兩個核心是：把要垂直居中的元素相對於父元素絕對定位，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;
}
複製代碼

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

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

設置第三方基準

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;
}
複製代碼

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

使用flex佈局

HTML

<div id="box">test vertical align</div>
複製代碼

CSS

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

這種方式一樣適用於塊級元素：

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;
}
複製代碼

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;
}
複製代碼

這種方式也是首先給父元素設置 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;
}
複製代碼

要注意的是，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;
}
複製代碼

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;
}
複製代碼

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;
}
複製代碼

若是將 vertical-align 屬性的值修改成 baseline，效果更好：

使用 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;
}
複製代碼

這種場景下使用 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;
}
複製代碼

一樣的添加兩個輔助元素，而後將 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;
}
複製代碼