居中定位

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

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

[!NOTE]

父元素的固定height和width仅用于演示目的。

<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;
}