将绝对元素定位在其相对父元素的中心答案

【问题标题】：positioning an absolute element in the center of it's relative parent element将绝对元素定位在其相对父元素的中心
【发布时间】：2013-05-19 02:21:45
【问题描述】：

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

它在底部好吧，但我不能让它居中

我试过了

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>

【问题讨论】：

标签： html css positioning

【解决方案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/

【讨论】：

thanx 但是内部 div 会根据其父级的内容而改变，所以我不能使用静态百分比