position:absolute实现水平居中

要使用position: absolute实现元素的水平居中，你需要设置元素的左右margin为auto，并给定一个固定的宽度。此外，其父元素需要是相对定位(position: relative)，以确保绝对定位的参照是父元素而不是整个页面。

以下是实现水平居中的CSS代码：




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  width: 200px; /* 你需要给定一个宽度 */
  left: 50%;
  margin-left: -100px; /* 宽度的一半 */
}

HTML结构：




<div class="parent">
  <div class="child">
    水平居中的内容
  </div>
</div>

这样.child元素就会在.parent元素内水平居中显示。

position:absolute实现水平居中

评论已关闭

推荐阅读