css - 如何水平居中对齐绝对定位在另一个 DIV 中的 DIV？

Question

如何水平居中对齐绝对定位在另一个 DIV 中的 DIV？

HTML

<div style="width:250px;height:250px;background:red;position:relative;">
    <div style="width:100px;height:100px;background:blue;position:absolute;"></div>
</div>

谢谢

Answer 1

只有当内部 div 的背景没有背景色时，我的回答才有效。正如您的示例所做的那样，我添加了第三个 div。第二个用于居中，第三个用于着色。

<div style="width:250px;height:250px;background:red;position:relative;">
  <div style="width:100px;height:100px;position:absolute;padding-left:50%;margin-left:-50px">
    <div style="background:blue;padding:0px;"></div>
  </div>
</div>

这里需要注意的重要一点是:padding-left:50%;margin-left:-50px;。 -50px 是 div 宽度的一半。