多年來弟蚀，垂直居中問題一度成為前端開發(fā)者的熱門話題。因?yàn)檫@個(gè)需求極其常見挑豌，但又看似簡單安券，實(shí)施起來很難，尤其是涉及到尺寸不固定的情況時(shí)氓英。
html基本結(jié)構(gòu)
<main>
<h1>我是居中的嗎侯勉？</h1>
<p>請讓我保持居中顯示</p>
</main>
css基本結(jié)構(gòu)
body{
background: #DBDCFF;
text-align: center;
}
1、基于絕對定位的方案
我們先來看兩個(gè)早期的實(shí)現(xiàn)方法铝阐，它要求元素必須有固定的寬高度：
第一種需要計(jì)算margin-top和margin-left的值
main{
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -9em;
width: 18em;
height: 6em;
background: #C88F6E;
}
第二種就相對簡潔了許多
main{
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 18em;
height: 6em;
margin: auto;
background: #C88F6E;
}
效果如圖：
上面的方法最大的局限就是前面說的，它要求元素必須寬高度是固定的徘键，在通常情況下练对，對那些需要居中的元素來說，其尺寸往往是由其內(nèi)容決定的吹害。那么螟凭，如果可以找到一個(gè)屬性的百分比值以元素自身的寬高作為解析基準(zhǔn)，那么我們的難題也就迎刃而解了它呀！
我們或許可以從CSS變形屬性中了解一下螺男，當(dāng)我們在translate()變形函數(shù)中使用百分比值時(shí)，是以該元素的自身寬度和高度為基準(zhǔn)進(jìn)行換算和移動(dòng)的纵穿。有了這個(gè)屬性下隧，我們就可以這樣解決了：
main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #C88F6E;
}
效果如圖：
這種方法很好的滿足了我們的需求谓媒，但是也有一些需要注意的地方：
實(shí)際項(xiàng)目中淆院，有時(shí)不能選用絕對定位，因?yàn)樗鼘φ麄€(gè)布局影響過大
如果我們需要被居中的元素高度已經(jīng)超過了視口篙耗，那它的頂部將會(huì)被截掉
在某些瀏覽器中迫筑，這個(gè)方法可能會(huì)導(dǎo)致元素的顯示有一些模糊宪赶，因?yàn)樵乜赡芊胖迷诎雮€(gè)像素上。
2脯燃、基于視口單位的方案
CSS值與單位（第三版）定義了一套新的單位搂妻，稱為視口相關(guān)的長度單位。
vw是與視口寬度相關(guān)的辕棚。與常人理解不同的是欲主，1vw實(shí)際上表示視口寬度的1%，而不是100%逝嚎。
與vw類似扁瓢，1vh表示視口高度的1%。
當(dāng)視口寬度小于高度時(shí)补君，1vmin等于1vw引几，否則等于1vh。
當(dāng)視口寬度大于高度時(shí)挽铁，1vmax等于1vw伟桅，否則等于1vh。
了解了以上規(guī)則叽掘，我們就可以利用它來嘗試解決垂直居中的問題：
main{
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
background: #C88F6E;
}
效果如圖：
3、基于Flexbox的方案
很明顯這是一個(gè)目前為止的最佳方案更扁，而且現(xiàn)代瀏覽器已經(jīng)對Flexbox有相當(dāng)不錯(cuò)的支持度了盖腕。
具體代碼如下：
body{
background: #DBDCFF;
text-align: center;
display: flex;
min-height: 100vh;
margin: 0;
}
main{
margin: auto;
background: #C88F6E;
}
效果如圖：
當(dāng)我們使用Flexbox時(shí)，margin:auto不僅在水平方向上將元素居中浓镜，在垂直方向上也是如此溃列。
