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;
}