Question

is it possible to center a div inside a div so that when the parent div resizes, it still stays in the center? So far, I tried

margin:0 auto; and
margin-left: auto; margin-right: auto;

Both work, however it does not reposition once a div size is changed. Thank you :))))

markup:

<div id='bottomcontent' style="float: left; position: absolute; left: 0; bottom: 0; background-color:#0b0b0b; height:100px; width:796px;">

  <div id="bottomleftbutton" style="margin-left: 25px;">stuff here </div>
  <div id="bottomcentertext" style="margin-left: auto; margin-right: auto;">so far
  <h4>17</h4>
  places match your criteria</div>
  <div id="bottomrightbutton" style="float: right; margin-right: 25px;">stuff here </div>


</div>

Answer 1

Style the inner div with this:

position:absolute; 
top:0; 
bottom:0; 
left:0; 
right:0;
margin:auto;

See an example here: http://jsfiddle.net/2K4Gp/