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

一尘不染

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

css

在下面的示例中，#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
}

阅读 549

2020-05-16

共1个答案

一尘不染

如果要在左属性上居中对齐。对于顶部对齐，同样可以使用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;
}

2020-05-16