事實上，每次面試前端必問的問題就是這個。及其常見的需求，看起來似乎非常簡單，但是實現(xiàn)起來很費勁，尤其是涉及尺寸不固定的元素。
本篇文章將介紹比較流行的幾種方法。
行內塊
<body>
<div id="ghost"></div>
<span>
hello
</span>
</body>
#ghost {
display: inline-block;
height: 20em;
vertical-align: middle;
}
本質上是利用了內聯(lián)元素的 vertical-align 屬性，通過將此屬性置為middle，同一行內的內聯(lián)元素都將以設置這一屬性的內聯(lián)元素的基線對齊。
基于inline-block特有的屬性：擁有內聯(lián)元素的特性同時可以定義寬高，我們可以設置一個ghost行內塊用于定義高度，再讓其他內聯(lián)元素與其對齊，實現(xiàn)垂直居中。
當然我們也可以將其它元素置為行內塊，再設置寬度并添加text-align使其水平居中。
總結一下，此方法太過hack。
絕對定位
子元素固定寬高
<div id="main">
<div id="child">
hello
</div>
</div>
#main {
background-color: green;
height: 20em;
width: 20em;
position: relative;
}
#child {
position: absolute;
background: yellow;
top: 50%;
left: 50%;
height: 10em;
width: 10em;
margin-top: -5em;
margin-left: -5em;
}
顯然，這種方法的原理是：先利用絕對定位將這個元素的左上角放置與父元素的正中間，再利用負邊距將它向左上移動它本身的一半。
如果借助calc()函數可以說明得更加清楚：
#child {
position: absolute;
top: calc(50%-5em);
left: calc(50%-5em);
height: 10em;
width: 10em;
}
不固定寬高
實際中大多數時候我們并不知道子元素的實際寬高。
如果你屬性translate()函數，你一定知道當它的參數為百分比時，它會按照元素本身的百分比值進行變換，我們可以通過這個方法徹底擺脫對尺寸的依賴！
#child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
看起來已經完美解決了，但是它還有以下的缺陷：
- 絕對定位會對整體的布局造成很強烈的影響。
- 如果居中的元素超過了視窗會被裁剪掉。
- 在某些瀏覽器中，元素可能會被放置在半個像素上造成模糊。
視口居中
如果我們不采用絕對定位，對子元素設置margin使其左上角置于父元素中點，再用translate重復上一種方法的操作，是否可以實現(xiàn)呢？
答案是不可以，因為margin的百分比是以父元素的寬度為基準的，即便是top和bottom也是！ 沒錯，很扯。
如果僅僅想要垂直于視口，我們可以采用css中相對于視口的單位 vw、vh、vmin、vmax
- 1vw 表示視口寬度的1%，同理1vh等于視口高度的1%
- 當視口寬度小于高度時，1vmin=1vw，否則1vmin=1vh，另一種情況同理。
#child {
margin:50vh auto 0;
transform: translateY(-50%);
}
它只能基于視口居中。
Flexbox
flex當然是未來的趨勢，上面的一切都可以理解成為了照顧老舊的瀏覽器的猴戲（雖然translate和視口單位的兼容性也不怎么好）。
<body>
<div id="main">hello</div>
</body>
#main {
margin: auto;
}
body {
display: flex;
}
啊，很難受。使用flexbox時，margin：auto不僅在水平方向上將元素居中，垂直方向上也是如此。
如果你熟悉flex的話，其實還有多種實現(xiàn)方式。
body {
display: flex;
justify-content: center;
align-items:center;
}
或者對子元素單獨設置交叉軸對齊方式：
body {
display: flex;
justify-content: center;
}
#main {
align-self:center;
}
