Keeping a DIV at bottom-center of its parent DIV

use this:

#header{ 
width:1062px; height:262px; background-color:#110000; text-align:center;  
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}  

#header .container{ 
    width:940px; 
    height:262px; 
    background-color:#999000; 
    margin:0px auto;
    bottom:0px; 
    margin-bottom: 0px;
    padding-top: 0px;
}

Here the jsfiddle

UPDATE:
As DenisVuyka said in comment, i should add that the above sample was as answer to this particular question with fixed height for DIV.
If you want that height of DIV don't break up things then for example you should use padding-top:10%; in the #header and height:100% in #header .container CSS.

#header{ 
width:462px; height:262px; background-color:#110000; text-align:center;  
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;  
}    

#header .container{ 
    width:300px; 
    height:100%; 
    background-color:#999000; 
    margin:0px auto;
    bottom:0px; 
    margin-bottom: 0px;
    padding-top: 0px;
}

Here is a demo: http://jsfiddle.net/d6ct6/ .

try in this way:

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

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.

try this

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