Home How to horizontally center a <div> in another <div>?
Reply: 1

How to horizontally center a <div> in another <div>?

Paolo Forgia
1#
Paolo Forgia Published in 2017-02-28 13:44:16Z

How can I horizontally center a <div> within another <div> using CSS (if it's even possible)?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
Paolo Forgia
2#
Paolo Forgia Reply to 2017-02-28 13:44:16Z

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 IE8+, 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;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 1.029666 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO