How can I horizontally center an element?
alignment, centering, css, html
Solution
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`.
Other Solutions
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>
Problem
How can I horizontally center a `<div>` within another `<div>` using CSS? ``` <div id="outer"> <div id="inner">Foo foo</div> </div> ```