CSS 使用表格布局进行水平和垂直居中

示例

使用tabledisplay属性可以轻松地使子元素居中。

的HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

的CSS

.wrapper { 
    display: table; 
    vertical-align: center; 
    width: 200px; 
    height: 200px; 
    background-color: #9e9e9e; 
}
.parent { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
.child { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
}