居中定位

使用CSS变换在父元素中垂直和水平居中子元素。

  • 将父元素的position设置为relative,将子元素的position设置为absolute,以便将其相对于父元素定位。
  • 使用left: 50%top: 50%将子元素从包含块的左边和顶部边缘偏移50%。
  • 使用transform: translate(-50%, -50%)来取消其位置,使其垂直和水平居中。

[!NOTE]

父元素的固定heightwidth仅用于演示目的。

<div class="parent">
  <div class="child">居中内容</div>
</div>
.parent {
  border: 1px solid #9C27B0;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}