[if !supportLists]1.??[endif]使用絕對(duì)定位和負(fù)外邊距對(duì)塊級(jí)元素進(jìn)行垂直居中
<div id="box">
??? <div id="child">我是測(cè)試DIV</div>
</div>
#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;
??? line-height: 100px;
}
這個(gè)方法兼容性不錯(cuò)症歇，但是有一個(gè)小缺點(diǎn)：必須提前知道被居中塊級(jí)元素的尺寸，否則無(wú)法準(zhǔn)確實(shí)現(xiàn)垂直居中刃永。
[if !supportLists]2.??[endif]使用絕對(duì)定位和transform
<div id="box">
??? <div id="child">我是測(cè)試DIV</div>
</div>
#box {
??? width:300px;
???height: 300px;
??? background:#ddd;
???position: relative;
}
#child {
???background: #93BC49;
???position: absolute;
??? top:50%;
???transform: translate(0, -50%);
}
這種方法有一個(gè)非常明顯的好處就是不必提前知道被居中元素的尺寸了列疗，因?yàn)閠ransform中translate偏移的百分比就是相對(duì)于元素自身的尺寸而言的安接。
[if !supportLists]3.??[endif]絕對(duì)定位結(jié)合margin:auto
<div id="box">
??? <div id="child">呆呆今天退役了(。﹏。)</div>
</div>
#box {
??? width:300px;
???height: 300px;
???background: #ddd;
???position: relative;
}
#child {
??? width:200px;
???height: 100px;
???background: #A1CCFE;
???position: absolute;
??? top:0;
???bottom: 0;
???margin: auto;
???line-height: 100px;
}
這種實(shí)現(xiàn)方式的兩個(gè)核心是：把要垂直居中的元素相對(duì)于父元素絕對(duì)定位躲因，top和bottom設(shè)為相等的值，我這里設(shè)成了0忌傻，當(dāng)然你也可以設(shè)為99999px或者-99999px無(wú)論什么大脉，只要兩者相等就行，這一步做完之后再將要居中元素的margin設(shè)為auto水孩，這樣便可以實(shí)現(xiàn)垂直居中了镰矿。
被居中元素的寬高也可以不設(shè)置，但不設(shè)置的話就必須是圖片這種自身就包含尺寸的元素俘种，否則無(wú)法實(shí)現(xiàn)
[if !supportLists]4.??[endif]使用padding實(shí)現(xiàn)子元素的垂直居中
<div id="box">
??? <div id="child">今天西安的霾嚴(yán)重的嚇人秤标，剛看了一眼PM2.5是422</div>
</div>
#box {
??? width:300px;
???background: #ddd;
???padding: 100px 0;
}
#child {
??? width:200px;
???height: 100px;
???background: #F7A750;
???line-height: 50px;
}
這種實(shí)現(xiàn)方式非常簡(jiǎn)單绝淡，就是給父元素設(shè)置相等的上下內(nèi)邊距，則子元素自然是垂直居中的苍姜，當(dāng)然這時(shí)候父元素是不能設(shè)置高度的牢酵，要讓它自動(dòng)被填充起來(lái)，除非設(shè)置了一個(gè)正好等于上內(nèi)邊距+子元素高度+下內(nèi)邊距的值衙猪，否則無(wú)法精確的垂直居中馍乙。
這種方式看似沒(méi)有什么技術(shù)含量，但其實(shí)在某些場(chǎng)景下也是非常好用的垫释。
[if !supportLists]5.??[endif]使用flex布局
<div id="box">
??? <div id="child">
???????程序員怎么才能保護(hù)好眼睛丝格？
??? </div>
</div>
#box {
??? width:300px;
???height: 300px;
???background: #ddd;
???display: flex;
???align-items: center;
}
#child {
??? width:300px;
???height: 100px;
???background: #8194AA;
???line-height: 100px;
}
flex布局（彈性布局/伸縮布局）里門(mén)道頗多，這里先針對(duì)用到的東西簡(jiǎn)單說(shuō)一下棵譬，想深入學(xué)習(xí)的小伙伴可以去看阮一峰老師的博客铁追。（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）
flex也就是flexible，意為靈活的茫船、柔韌的琅束、易彎曲的。
元素可以通過(guò)設(shè)置display:flex;將其指定為flex布局的容器算谈，指定好了容器之后再為其添加align-items屬性涩禀，該屬性定義項(xiàng)目在交叉軸（這里是縱向軸）上的對(duì)齊方式，可能的取值有五個(gè)然眼，分別如下：
flex-start:：交叉軸的起點(diǎn)對(duì)齊艾船；
flex-end：交叉軸的終點(diǎn)對(duì)齊；
center：交叉軸的中點(diǎn)對(duì)齊高每；
baseline：項(xiàng)目第一行文字的基線對(duì)齊屿岂；
stretch（該值是默認(rèn)值）：如果項(xiàng)目沒(méi)有設(shè)置高度或者設(shè)為了auto，那么將占滿整個(gè)容器的高度
[if !supportLists]6.??[endif]第二種使用彈性布局的方式
<div id="box">
??? <div id="child">
???????答案當(dāng)然是多用綠色的背景哈哈
??? </div>
</div>
#box {
??? 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爷怀，該屬性可能的取值有四個(gè)，分別如下：
row（該值為默認(rèn)值）：主軸為水平方向带欢，起點(diǎn)在左端运授；
row-reverse：主軸為水平方向，起點(diǎn)在右端乔煞；
column：主軸為垂直方向吁朦，起點(diǎn)在上沿；
column-reverse：主軸為垂直方向渡贾，起點(diǎn)在下沿逗宜。
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式，可能的取值有五個(gè)，分別如下（不過(guò)具體的對(duì)齊方式與主軸的方向有關(guān)纺讲，以下的值都是假設(shè)主軸為從左到右的）：
flex-start（該值是默認(rèn)值）：左對(duì)齊擂仍；
flex-end：右對(duì)齊；
center：居中對(duì)齊刻诊；
space-between：兩端對(duì)齊防楷，各個(gè)項(xiàng)目之間的間隔均相等牺丙；
space-around：各個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等则涯。
7.使用line-height 對(duì)單行文本進(jìn)行垂直居中
<div id="box">
??? 我是一段測(cè)試文本
</div>
#box{
??? width:300px;
???height: 300px;
???background: #ddd;
???line-height: 300px;
}
這里有一個(gè)小坑需要大家注意：line-height(行高) 的值不能設(shè)為100%，我們來(lái)看看官方文檔中給出的關(guān)于line-height取值為百分比時(shí)候的描述：基于當(dāng)前字體尺寸的百分比行間距冲簿。所以大家就明白了粟判，這里的百分比并不是相對(duì)于父元素尺寸而言，而是相對(duì)于字體尺寸來(lái)講的峦剔。
[if !supportLists]7.??[endif]使用line-height 和 vertical-align 對(duì)圖片進(jìn)行垂直居中
<div id="box">
??? <img src="duncan.jpeg">
</div>
#box{
??? width:300px;
???height: 300px;
???background: #ddd;
???line-height: 300px;
}
#box img {
???vertical-align: middle;
}
[if !supportLists]8.??[endif]使用display 和 vertical-align 對(duì)容器里的文字進(jìn)行垂直居中
<div id="box">
??? <div id="child">我也是一段測(cè)試文本</div>
</div>
#box {
??? width:300px;
???height: 300px;
???background: #ddd;
???display: table;
}
#child {
???display: table-cell;
???vertical-align: middle;
}
這里關(guān)于vertical-align啰嗦兩句：vertical-align屬性只對(duì)擁有valign特性的html元素起作用档礁，例如表格元素中的<td><th>等等，而像<div><span>這樣的元素是不行的吝沫。
valign屬性規(guī)定單元格中內(nèi)容的垂直排列方式呻澜，語(yǔ)法：<td valign="value">，value的可能取值有四種：
top：對(duì)內(nèi)容進(jìn)行上對(duì)齊
middle：對(duì)內(nèi)容進(jìn)行居中對(duì)齊
bottom：對(duì)內(nèi)容進(jìn)行下對(duì)齊
baseline：基線對(duì)齊
關(guān)于baseline值：基線是一條虛構(gòu)的線惨险。在一行文本中羹幸，大多數(shù)字母以基線為基準(zhǔn)。baseline 值設(shè)置行中的所有表格數(shù)據(jù)都分享相同的基線辫愉。該值的效果常常與 bottom 值相同栅受。不過(guò)，如果文本的字號(hào)各不相同恭朗，那么 baseline 的效果會(huì)更好屏镊。
