Align child div with center in center

Question

I would like to align the div child inside the parent div ( header-image as the background image), centered vertically and horizontally below.

 <div id="header-image"> <div class="row"> ... Content </div> </div> 

I found a solution for horizontal centering:

 <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%;"> ... content </div> </div> 

But I don’t know how to get content from below (only works with position:absolute )

For a better understanding of http://webstopp.de/ you can see the header-image and some text in it, but the text should be at the bottom of the header-image div .

Answer 1

 #header-image { background: url("http://placehold.it/200x200&text=[banner img]") no-repeat; height: 200px; width: 200px; position: relative; left: 0; bottom:0; } .row { position: absolute; left: 50%; bottom:0; } .inner { position: relative; left: -50% } 

Fiddle

Answer 2

Try this for your child div: margin-top: 99%;