居中定位
使用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;
}