positioning an absolute element in the center of it's relative parent element

问题

here is my code i want child element to be at bottom and center of it's parent

it's in the bottom alright but i cant get it to center

i've tried

text-align:center ;

for parent

and

margin:0 auto ;

for child but it doesn't work

<!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:

This might answer your question: Centering a percent-based div

Use percentages with your margins.

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

Demo: http://jsfiddle.net/DkNdx/

来源：https://stackoverflow.com/questions/16624676/positioning-an-absolute-element-in-the-center-of-its-relative-parent-element

标签

html

css

positioning

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!