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

    

        
vertical-centering, 我要垂直居中
    

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

转载于:https://blog.51cto.com/6966244/2048420