CSS 布局 - 使用 transform 进行居中

2019-07-16

描述

使用 position: absolute 和 transform: translate() 水平垂直居中一个父元素中的子元素（这是除 flexbox 和 display: table 以外的另一种居中方案）。他类似于 flexbox，这种方案不需要你知道父元素或子元素的高和宽，因此他非常适用于有自适应需求的应用。

HTML

<div class="parent"><div class="child">Centered content</div></div>

CSS

.parent {
  border: 1px solid #333;
  height: 250px;
  position: relative;
  width: 250px;
}
.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Demo

说明

1. 在子元素上的 position: absolute 可以允许该元素基于父容器块的边界进行位置的设定
2. left: 50% 和 top: 50% 使该元素距父容器上和左的距离分别为父元素高和宽的 50%
3. transform: translate(-50%, -50%) 允许子元素沿着父元素高和宽的反方向移动自身高、宽 50% 的距离，这样一来，子元素就可以水平垂直居中了
4. 对于这个 Demo 来说，我们需要固定其父元素的高和宽

浏览器支持

支持率：97.7%
支持情况：https://caniuse.com/#feat=transforms2d
⚠️：进行所有支持时需要提供前缀

返回总目录

每天 30 秒系列之 CSS