Question

我无法将内部position: absolute元素置于position: relative元素（https://jsfiddle.net/qL0c8cau/）内：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

我无法看出它有什么问题。我将一切都设置正确，但由于某种原因它没有水平对齐。

我在这里做错了什么？

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>

Answer 2

在div .two中，而不是使用left：0;和右：0;要将div放在中心，请使用transform: translateX(-25%);作为替代。我认为左右属性不起作用的原因是因为.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;
}

Answer 3

主要问题是内部元素（.two）宽度大于它的父元素（.one）。我清理了（改变颜色和不透明度，没有混淆）并检查出来：

*如果您希望内部元素宽度有意大于其父级，请查看Guatam的答案

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 4

您在内部人px

中使用较小的div宽度

您在400px宽度

内使用200px宽度

这就是为什么你这样做的原因

如果你想center一个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>

Answer 5

或者，您可以使用flex来解决上述问题！为您的问题提供更方便，更现代的解决方案。

Check browser support for flex

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

水平居中相对的绝对元素

5 个答案: