Keeping a DIV at bottom-center of its parent DIV

Question

My HTML structure is basically this -

<div id="header">
    <div class="container">
    </div>
</div>
<div id="content">
    <div class="container">
    </div>
</div>
<div id="footer">
    <div class="container">
    </div>
</div>

Ignore any elements except <div id="header"> I want to align <div class="container"> inside <div id="header"> at exactly bottom center. I'm using the following CSS code-

#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }

There are height differences between the parent (#header) and child (#header .container) DIVs. Removing position:absolute; from the child centers it but it sticks to the parent's top instead of bottom. Keeping position:absolute; sticks it at the bottom but aligns it to the left.

How do I align it both center AND bottom at the same time?

Answer 1

I tried all the solution above but it didn't work when you resize the browser window. This solution is mostly to be applied when you don't know the element's width. Or if the width is changed on resize.

After making some research I tried the following and it worked perfectly on all screen sizes.

#somelement {
  position: absolute;
  left: 50%;
  bottom: 0px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

I shared this for anyone still facing this issue.

Answer 2

try in this way:

#header .container{ 
   width: 940px;  
   height: 262px; 
   background-color: #220000; 
   position: absolute;
   bottom: 0 ;
   left: 50%;
   margin-left: -470px; 
}