html - How to horizontally center a <div> in another <div>? -

how can horizontally center <div> within <div> using css (if it's possible)?

<div id="outer">     <div id="inner">foo foo</div> </div>

you can apply css inner <div>:

#inner {   width: 50%;   margin: 0 auto; }

of course, don't have set width 50%. width less containing <div> work. margin: 0 auto actual centering.

if targeting ie8+, might better have instead:

#inner {   display: table;   margin: 0 auto; }

it make inner element center horizontally , works without setting specific width.

working example here:

#inner {    display: table;    margin: 0 auto;  }

<div id="outer" style="width:100%">    <div id="inner">foo foo</div>  </div>

Shashtri