xxxxxxxxxx
.content {
position: absolute;
text-align: center;
top: 50%;
}
xxxxxxxxxx
#inner {
margin: auto 0;
}
#outer {
width:100%;
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
xxxxxxxxxx
/* margin auto does the magic, make sure to provide width less than 100% */
.center {
margin: auto;
width: 400px;
}
.center {
margin: auto;
width: 50%;
}
xxxxxxxxxx
.<your-outer-div> {
display: flex;
justify-content: center;
('align-items: center' will allow you to vertically center too ;))
}
xxxxxxxxxx
/* this works most of the time for
divs that aren't fixed or absolute */
.center{
margin-left: auto;
margin-right: auto;
}/* note "margin: auto;" will center both horizontally and vertically,
(can't wait for a css version that adds "margin-x", im picky about the wrong things) */
xxxxxxxxxx
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>