将绝对元素定位在它的相对父元素的中心

时间:2013-05-18 13:16:26

标签: html css positioning

这是我的代码 我希望子元素位于其父元素的底部和中心

它在底部没问题,但我无法将其置于中心

我试过

text-align:center ;

为父母

margin:0 auto ;

对于孩子但不起作用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative; text-align:center'>
    Outer

    <div style='background-color: green;
                position: absolute; width: 80%; bottom: 0  ; margin-right:auto ; margin-left:auto ; padding:5px'>
                Inner

    </div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

这可能会回答您的问题:Centering a percent-based div

将百分比与边距一起使用。

<div style='background-color: green;
            position: absolute; width: 80%; bottom: 0  ; margin-right:10%; margin-left: 10%; padding:5px'>

演示:http://jsfiddle.net/DkNdx/