居中显示表格
使用 display: table
属性在父元素中垂直和水平居中子元素。
- 使用
display: table
将.center
元素设置为类似<table>
元素的行为。 - 将
height
和width
设置为100%
,使元素填充父元素中的可用空间。 - 在子元素上使用
display: table-cell
,使其表现得像<td>
元素。 - 在子元素上使用
text-align: center
和vertical-align: middle
,使其水平和垂直居中。 - 外部父元素(
.container
)必须具有固定的width
和height
。
<div class="container">
<div class="center"><span>居中内容</span></div>
</div>
.container {
border: 1px solid #9C27B0;
height: 250px;
width: 250px;
}
.center {
display: table;
height: 100%;
width: 100%;
}
.center > span {
display: table-cell;
text-align: center;
vertical-align: middle;
}