Horizontally Center a Div in a Div

How to horizontally center a div inside a div with CSS ? e.g

<div id="outer">
<div id="inner">
This is inner one...</div>
</div>

It is very simple, just apply this css.

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

Or If you don't want to set a fixed width on the inner div you could do something like this:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

That makes the inner div an inline element that can be centered with text-align.

Box Model

#outer{
    width:100%;

    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* standard */
    display:box;
    box-pack:center;
    box-align:center;
}

#inner{
    width:50%;
}

Another way with Box Model:

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}