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 style="width:250px;height:250px;background:red;position:relative;">
    <div style="width:100px;height:100px;background:blue;position:absolute; margin: auto;"></div>
</div>

自动边距应该水平和垂直居中你的div

Answer 2

如果您知道每个div的尺寸，并且计划继续使用position:absolute;，则只需设置top和left坐标。内部div

就是这样的

top:75px; left:75px;

http://jsfiddle.net/jasongennaro/zQjaU/

*可能会偏离几个px。您可能需要调整。

Answer 3

仅当内部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的DIV？

3 个答案: