在相对定位元素内水平居中绝对定位元素

Question

我无法将一个position: absolute的内部元素居中在一个position: relative的元素内（https://jsfiddle.net/qL0c8cau/）:

html,body,div {margin:0;padding:0;}
.one {
  position: relative;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #900;
}
.two {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

<div class="one">
  
  <div class="two"></div>
  
</div>

我看不出有什么问题。我已经正确设置了一切，但由于某种原因它没有水平对齐。

我在这里做错了什么？

- sifa

---

.two 上的 margin:auto; 看起来有问题。如果它是绝对定位的，为什么要设置它的边距？ - zgood

@zgood 因为这是对齐的方式。看一下它从上到下是如何对齐的。无论如何，我认为我搞定了这个。 - sifa

我应该在这里指出：这不是关于负值和变换属性的问题。请不要建议它们，我也知道它们。 - sifa

Answer 1

将以下内容添加到您的CSS中：

.two {
  position: absolute;
  top:50%;
  left: 50%;
  transform:translate(-50%,-50%);
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

这段代码可以确保无论你的容器有多大，内部容器始终保持在外部容器的中心。

html,body,div {margin:0;padding:0;}
.one {
  position: relative;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #900;
}
.two {
  position: absolute;
  top:50%;  /* this to center the box w.r.t to parent */
  left: 50%;/* this to center the box w.r.t to parent */
  /* Above 2 lines wont fully center it, the next line internally centers it, buy moving itself 50% left and top */
  transform:translate(-50%,-50%);
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

<div class="one">
  <div class="two"></div>
</div>

- Gautam Naik

Answer 2

在 div .two 中，不要使用 left: 0; 和 right: 0; 将 div 放置在中心位置，可以使用 transform: translateX(-25%); 作为替代方案。我认为 left 和 right 属性不起作用的原因是因为 .two 在 .one 中，它会抵消定位，即使 .two 的位置是绝对的。

JSFiddle

.two {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-25%);
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

- Jos van Weesel

Answer 3

主要问题是内部元素(.two)的宽度大于其父元素(.one)。我进行了清理(更改颜色和不透明度以避免混淆)，请看：

*如果您想故意使内部元素的宽度大于其父元素，请查看Guatam的答案。

html,
body,
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.one {
  width: 400px;
  height: 200px;
  margin: 50px auto;
  position: relative;
  background: red;
}

.two {
  height: 160px;
  width: 160px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: blue;
}

<div class="one">

  <div class="two"></div>

</div>

- StefanBob

Answer 4

你在内部的 div 中使用了较小的 px 宽度

你在 200px 的宽度内使用了 400px 的宽度

这就是为什么会出现这种情况

如果你想要让一个 div 居中，它应该与相对父元素的大小相同

    html,body,div {margin:0;padding:0;}
    .one {
      position: relative;
      margin: 50px auto;
      width: 400px;
      height: 100px;
      background: #900;
    }
    .two {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      background: #0f0;
      opacity: 0.3;
      height: 160px;
      width: 200px;
    }

    <div class="one">
      
      <div class="two"></div>
      
    </div>

- mooga

Answer 5

或者，你可以使用flex来解决你上面的问题！这是一个更方便和现代化的解决方案。

请点击检查浏览器对flex的支持。

.wrap {
  display: flex;
  justify-content: center;
}

.one {
  display: flex;
  width: 400px;
  height: 200px;
  background: #fa0;
  justify-content: center;
  align-items: center;
}

.two {
  background: #627;
  height: 160px;
  width: 200px;
}

<div class="wrap">
  <div class="one">
    <div class="two"></div>
  </div>
</div>

- Saurabh Sharma