placing an element at the bottom of a page centered

[atlantis72]

I want a div at the bottom of another div, and I want it centered, just using css not javascript.

HTML
<div id="parent">
      <div id="bottom_element">test</div>
</div>


CSS
#parent {height:100% width:100%}
#bottom_element {position:absolute; bottom:5px; width:200px; margin:0 auto}

So the issue is that position absolute and margin auto do not seem to work together. What is an alternative without javasript?

[Jacques1]

The parent element must have a non-static position as well. And you're missing a semicolon between the width and the height declaration.

[atlantis72]

Sorry I just wrote it quickly as an example.

So if I make parent position relative, then it will work?

[Azercii]

Might be bad practice (not sure?), but on a layout I'm working on I use;

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

Which would center the bottom_element, then it may require padding/margin to position it correctly.

 

Here is a Fiddle

[adam_bray]

The easiest way to do it is with flexbox, but it may require some browser prefixing to work universally.