<p>How can I horizontally center a <code>&lt;div&gt;</code> within another <code>&lt;div&gt;</code> using CSS?</p>
<pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;outer&quot;&gt;
  &lt;div id=&quot;inner&quot;&gt;Foo foo&lt;/div&gt;
&lt;/div&gt;
</code></pre>


You can apply this CSS to the inner
```
<div>
```
:
```
```
#inner {
  width: 50%;
  margin: 0 auto;
}
```
```
Of course, you don't have to set the
```
width
```
to
```
50%
```
. Any width less than the containing
```
<div>
```
will work. The
```
margin: 0 auto
```
is what does the actual centering.
If you are targeting
Internet Explorer 8
(and later), it might be better to have this instead:
```
```
#inner {
  display: table;
  margin: 0 auto;
}
```
```
It will make the inner element center horizontally and it works without setting a specific
```
width
```
.
Working example here:
```
```
#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
```
```
```
```
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
```
```
EDIT
With
```
flexbox
```
it is very easy to style the div horizontally and vertically centered.
```
```
#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}
```
```
```
```
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
```
```
To align the div vertically centered, use the property
```
align-items: center
```
.