CSS SNIPPET

  返回

用表格布局实现元素居中  页面布局

将指定元素在其父元素内水平和垂直居中,使用 display: table而不是flexbox

HTML
<div class="container">
  <div class="center"><span>Centered content</span></div>
</div>
CSS
.container {
  border: 1px solid #333;
  height: 250px;
  width: 250px;
}

.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
效果演示
Centered content
代码说明
  1. '.center' 的display: table 使元素的显示行为类似于<table> 元素。
  2. '.center' 的高度和宽度设为100% 使元素充满其父元素的整个可用空间。
  3. '.center > span' 的display: table-cell使元素的显示行为类似于<td>元素。
  4. '.center > span' 的text-align: center 将子元素水平居中。
  5. '.center > span' 的vertical-align: middle 使子元素垂直居中。
  6. 外层父元素 (本例中的'.container' )必须有固定的高度和宽度。
浏览器支持

100.0%