居中显示表格

使用 display: table 属性在父元素中垂直和水平居中子元素。

  • 使用 display: table.center 元素设置为类似 <table> 元素的行为。
  • heightwidth 设置为 100%,使元素填充父元素中的可用空间。
  • 在子元素上使用 display: table-cell,使其表现得像 <td> 元素。
  • 在子元素上使用 text-align: centervertical-align: middle,使其水平和垂直居中。
  • 外部父元素(.container)必须具有固定的 widthheight
<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;
}