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

如何水平居中对齐绝对定位在另一个DIV中的DIV？如何水平居中对齐绝对定位在另一个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>

谢谢

来源

2011-07-05 manraj82

我的答案只有在内部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宽度的一半。

来源

2011-07-05 11:58:14 SteeveDroz

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

裕汽车应在水平和垂直

来源

2011-07-05 11:48:35

感谢您的回答，但它不起作用 – manraj82

是和否......取决于浏览器。 – SteeveDroz

是的，这取决于...问题是在ie6和歌剧，如果我没有错......也许IE7也。如果您需要完整的交叉浏览，那么'margin-left：75px'和'margin-right：75px'就是答案，但它与您的external_div_width - internal_div_width –

中心您的div如果你知道每个div的大小和你打算继续使用position:absolute;，您只需设置top和left坐标。因此，像这样在内部div

top:75px; left:75px;

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

*可能会关闭一些像素。您可能需要调整。

来源

2011-07-05 11:55:54