如何水平居中對齊絕對定位在另一個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