CSS

版權歸作者所有，任何形式轉載請聯繫作者。
作者：U_U（來自豆瓣）
來源：https://www.douban.com/note/495805313/

以下就是我學習之後對其的改進, 通過absolute和margin來實現任意的單行(多行)垂直居中

這種方式實現的垂直居中靈活在哪裏?

• 不需要知道待垂直居中的容器高度(意味着不需要寫死任何高度數值)
• 支持多行垂直居中
• 可做爲工具樣式來使用, 例如這裏的: .vcenter, .vcenter-child

CSS

.vcenter {
    position: relative;
    height: 100%;
}
.vcenter-child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: auto;
    display: table;
    text-align: center;
}

HTML

<!-- 我們需要垂直居中的容器 -->
<div class="container">
    <div class="vcenter">
        <div class="vcenter-child">vertical-centering, 我要垂直居中</div>
    </div>
</div>

擴展
http://www.cnblogs.com/zhaofeis/p/5938525.html