在說(shuō)垂直居中之前，我們先回顧一下 水平居中
- 如果它是一個(gè)行內(nèi)元素，對(duì)父元素應(yīng)用 text-align: center 即可
- 如果它是一個(gè)塊級(jí)元素，對(duì)元素自身應(yīng)用 margin: auto 即可
設(shè)計(jì)場(chǎng)景
- 垂直居中是現(xiàn)實(shí)開(kāi)發(fā)中常見(jiàn)的需求之一
- 當(dāng)要對(duì)寬高不固定的元素進(jìn)行垂直居中的時(shí)候，開(kāi)發(fā)的哥哥們就要撓頭了
基于絕對(duì)定位的解決方案
- 結(jié)構(gòu)：
<div class="main">
<h1>標(biāo)題</h1>
<p>固定寬高元素垂直居中</P>
</div>
- 風(fēng)格：
.main {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
}
之前在[《網(wǎng)頁(yè)設(shè)計(jì)手法之“滿幅的背景，定寬的內(nèi)容”》][1]一文中，有講過(guò)calc()函數(shù)，基于該函數(shù)，我們可以對(duì)上面的風(fēng)格做個(gè)優(yōu)化：
.main {
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 50px);
width: 200px;
height: 100px;
}
很顯然，這個(gè)方法的最大局限性在于 元素的寬高必須是固定的；但很多時(shí)候，元素的大小是由其內(nèi)容決定的，我們就得找一個(gè) **百分比值是以自身的寬高為基準(zhǔn)的屬性 **
.main {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
基于視口單位的解決方案
當(dāng)不使用絕對(duì)定位的時(shí)候，我們就會(huì)丟失left和top，此時(shí)我們面臨的問(wèn)題是：如何把這個(gè)元素的左上角放置在容器的正中心？
.main {
width: 200px;
margin: 50vh auto 0;
transform: translateY(-50%);
}
結(jié)合了 固定寬度+margin 的水平居中方法
使用視口單位vh，即1vh表示視口高度的1%；它是以整個(gè)視口為參照標(biāo)準(zhǔn)的
注意：它只適用于在視口中居中的場(chǎng)景
基于FlexBox的解決方案
body {
display: flex;
min-height: 100vh;
}
.main {
margin: auto;
}
注意：
待居中元素的父元素 display: flex + 待居中元素的父元素的固定高度 + 待居中元素margin: auto，可以實(shí)現(xiàn)水平垂直方向上的居中；
如果瀏覽器不支持Flexbox，垂直居中就會(huì)丟失，居中的元素就會(huì)緊貼著頂部，看起來(lái)還是可以接受的，也算是一種 優(yōu)雅降級(jí) 吧
[1]:http://www.lxweimin.com/p/a92f8f8f4d82
《CSS SECRETS》
