居中显示表格

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