CSS SNIPPET

  返回

用transform实现元素居中  页面布局

在父元素内水平和垂直居中一个子元素。使用position: absolutetransform: translate() (作为flexboxdisplay: 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;
}
效果演示
Centered content
代码说明
  1. 子元素设置position: absolute 使其能够基于父容器进行定位。
  2. left: 50%top: 50% 使子元素偏离父容器的左边和上边50%。
  3. transform: translate(-50%, -50%) 使子元素的高度和宽度可以负向 调整,从而实现水平和垂直方向的居中。
  4. 注意:本例中设置父元素为固定的宽度和高度仅为演示需要。
浏览器支持

100.0%

⚠️ 完整支持需要浏览器前缀。