如何在100％宽度的div中水平居中定位绝对定位的元素？

  • Z时代
  • 2024-01-10
  • 分类：问答

在下面的示例中，#logo绝对定位，我需要将其水平居中#header。通常，我会margin:0 auto为相对定位的元素执行“

a”操作，但是我被困在这里。有人可以给我指路吗？

HTML

<div id="header">
    <div id="logo"></div>
</div>

CSS

#header {
    background:black;
    height:50px;
    width:100%;
}
#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px
}

回答：

如果要在左属性上居中对齐。 对于顶部对齐，同样可以使用margin-top：（div的width / 2），概念与left属性相同。

将标头元素设置为position：relative很重要。

尝试这个：

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}

如果您不想使用计算，可以执行以下操作：

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

以上是 如何在100％宽度的div中水平居中定位绝对定位的元素？ 的全部内容， 来源链接： utcz.com/qa/417696.html

回到顶部