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: 1px solid black; } #outer { border: 1px 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
.