Question

How can I horizontally center a <div> within another <div> using CSS?

<div id="outer">   <div id="inner">Foo foo</div> </div> 

Answer 1

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>