方法一
使用絕對定位和負(fù)外邊距對塊級元素進(jìn)行垂直居中
#parent {
position: relative;
}
#child {
width: 150px;
height: 100px;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
}
上面的方法優(yōu)點(diǎn)是兼容性不錯迈嘹，缺點(diǎn)是必須知道被居中塊級元素的尺寸瞳秽，否則無法實(shí)現(xiàn)
方法二
使用絕對定位和transform
#parent {
position: relative;
}
#child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
/* 也可以transform: translateY(-50%) */
}
上面方法優(yōu)點(diǎn)是不需要知道被居中元素的尺寸，因?yàn)?code>transform中的translate屬性的百分比是相對于元素自身尺寸的
方法三
使用絕對定位和負(fù)外邊距
#parent {
position: relative;
}
#child {
height: 30%;
position: absolute;
top: 50%;
margin: -15% 0 0 0;
}
上面的方法其實(shí)和第一種方法差不多寿桨，只是涉及到一個margin的百分比參數(shù)，這個值規(guī)定了該元素基于父元素尺寸的百分比，可以根據(jù)實(shí)際應(yīng)用場景決定是使用百分比還是使用具體的數(shù)值鸯旁。
方法四
絕對定位結(jié)合margin:auto
#parent {
position: relative;
}
#child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
/* 如果設(shè)置了left:0;right:0;那么子元素將會水平垂直居中 */
}
上面方法的實(shí)現(xiàn)要求：要把垂直居中的元素相對父元素絕對定位，top量蕊、bottom設(shè)為相等的值上面的例子里設(shè)成了0铺罢，實(shí)際上只要設(shè)置為相等的值就可以實(shí)現(xiàn)居中，后面再設(shè)置元素的margin為auto残炮。
被居中的寬高也可以不設(shè)置韭赘，但是不設(shè)置的話必須是圖片這種自身就包含尺寸的元素，否則無法實(shí)現(xiàn)势就。
方法五
使用padding實(shí)現(xiàn)子元素垂直居中
#parent {
width: 300px;
height: 300px;
padding: 100px 0;
}
#child {
width: 200px;
height: 100px;
}
這種實(shí)現(xiàn)方式非常簡單泉瞻，就是給父元素設(shè)置相等的上下內(nèi)邊距，則子元素自然是垂直居中的苞冯，當(dāng)然這時候父元素是不能設(shè)置高度的袖牙，要讓它自動被填充起來，除非設(shè)置了一個正好等于上內(nèi)邊距+子元素高度+下內(nèi)邊距的值舅锄，否則無法精確的垂直居中鞭达。這種方式看似沒有什么技術(shù)含量，但其實(shí)在某些場景下也是非常好用的。
方法六
設(shè)置第三方基準(zhǔn)
<div id="parent">
<div id="base"></div>
<div id="child">被垂直居中的元素</div>
</div>
#parent {
width: 300px;
height: 300px;
background: #ddd;
}
#base {
height: 50%;
background: #AF9BD3;
}
#child {
height: 100px;
background: rgba(131, 224, 245, 0.6);
margin-top: -50px;
}
這種方式也非常簡單畴蹭，首先設(shè)置一個高度等于父元素高度一半的第三方基準(zhǔn)元素烘贴，那么此時該基準(zhǔn)元素的底邊線自然就是父元素縱向上的中分線，做完這些之后再給要垂直居中的元素設(shè)置一個margin-top撮胧，值的大小是它自身高度的一半取負(fù)桨踪，則實(shí)現(xiàn)垂直居中。
方法七
使用flex布局
<div id="box">我是被垂直居中的文本</div>
#parent {
width: 300px;
height: 300px;
display: flex;
align-items: center;
}
這種方式同樣適用于塊級元素芹啥，flex布局還是很強(qiáng)大的
點(diǎn)我進(jìn)入阮一峰老師的flex教程
方法八
使用彈性布局的方式
<div id="parent">
<div id="child">
我是被居中的文本
</div>
</div>
#parent {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
#child {
width: 300px;
height: 100px;
background: #08BC67;
line-height: 100px;
}
這種方式也是首先給父元素設(shè)置display:flex锻离，設(shè)置好之后改變主軸的方向flex-direction: column，該屬性可能的取值有四個墓怀，分別如下：
row（該值為默認(rèn)值）：主軸為水平方向汽纠，起點(diǎn)在左端；
row-reverse：主軸為水平方向傀履，起點(diǎn)在右端虱朵；
column：主軸為垂直方向，起點(diǎn)在上沿钓账；
column-reverse：主軸為垂直方向碴犬，起點(diǎn)在下沿。
justify-content屬性定義了項(xiàng)目在主軸上的對齊方式梆暮，可能的取值有五個服协，分別如下（不過具體的對齊方式與主軸的方向有關(guān)，以下的值都是假設(shè)主軸為從左到右的）：
flex-start（該值是默認(rèn)值）：左對齊啦粹；
flex-end：右對齊偿荷；
center：居中對齊；
space-between：兩端對齊唠椭，各個項(xiàng)目之間的間隔均相等跳纳；
space-around：各個項(xiàng)目兩側(cè)的間隔相等。
方法九
還有一種在前面已經(jīng)見到過很多次的方式就是使用 line-height 對單行文本進(jìn)行垂直居中
<div id="parent">
我是被居中的文本
</div>
#parent{
width: 300px;
height: 300px;
line-height: 300px;
}
這里有一個小坑需要大家注意：line-height的值不能設(shè)為100%贪嫂，我們來看看官方文檔中給出的關(guān)于line-height取值為百分比時候的描述：基于當(dāng)前字體尺寸的百分比行間距寺庄。所以大家就明白了，這里的百分比并不是相對于父元素尺寸而言撩荣，而是相對于字體尺寸來講的铣揉。
方法十
使用line-height和vertical-align 對圖片進(jìn)行垂直居中
<div id="parent">
<img >
</div>
#parent {
width: 300px;
height: 300px;
line-height: 300px;
}
#parent img {
vertical-align: middle;
}
方法十一
使用 display: table和vertical-align: middle對容器里的文字進(jìn)行垂直居中
<div id="parent">
<div id="child">我需要垂直居中的文本</div>
</div>
#parent {
width: 300px;
height: 300px;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
這里關(guān)于vertical-align啰嗦兩句：vertical-align屬性只對擁有valign特性的html元素起作用饶深，例如表格元素中的<td>餐曹、<th>、<img>等等敌厘，而像<div>台猴、<span>這樣的元素是不行的。
valign屬性規(guī)定單元格中內(nèi)容的垂直排列方式，語法：<td valign="value">饱狂，value的可能取值有四種：
top：對內(nèi)容進(jìn)行上對齊
middle：對內(nèi)容進(jìn)行居中對齊
bottom：對內(nèi)容進(jìn)行下對齊
baseline：基線對齊
關(guān)于baseline值：基線是一條虛構(gòu)的線曹步。在一行文本中，大多數(shù)字母以基線為基準(zhǔn)休讳。baseline 值設(shè)置行中的所有表格數(shù)據(jù)都分享相同的基線讲婚。該值的效果常常與 bottom 值相同。不過俊柔，如果文本的字號各不相同筹麸，那么 baseline 的效果會更好。
此文參考了呆里呆氣的文章雏婶，自己也做了一些修改物赶，如果有更好的意見和建議，歡迎下方留言留晚。謝謝酵紫！
