垂直居中，是前端的基本操作，我主要在兩種情況下進行簡單的實現。分別為：
- 已知高度（指自身高度）
- 未知高度
簡單的html代碼如下：
<style>
div.father{
height: 300px;
width: 500px;
border: 1px solid red;
}
</style>
<div class="father">
<div class="child">123</div>
</div>
- 未知高度時
- 1.通過 display:table-cell 實現（此方法針對 img 在 div 標簽中垂直居中很適用）
div.father{
display: table-cell;
vertical-align: middle;/*IE8 及以上*/
}
- 2.通過transform: translateY(-50%) 實現
div.father{
position: relative;
}
div.child{
position: absolute;
top: 50%;
transform: translateY(-50%);/* CSS3 */
}
- 已知高度時
- 1.通過 margin-top 實現
div.father{
position: relative;
}
div.child{
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
- 2.最后是一種比較特別的情況，當 .child 中的內容不超過一行時，通過設置 height = line-height 也可實現垂直居中
div.child{
height: 300px;
line-height: 300px;
}
以上，是簡單的總結，兼容性方面也很差，方法還有很多。
