How to horizontally center a div?
by David Pham • August 23, 2019 • Blog
HTML is a quite simple way to build a website but sometimes it will take us a lot of time because of very simple problem. This article will help us solve the problem how to horizontally center a <div> tag in HTML page.
Let’s consider we have a HTML tag like this
1 2 3 |
<div id="outer"> <div id="inner">Foo foo</div> </div> |
Now, it’s time to do the magic to make center the tag div “inner”
1 2 3 4 5 6 7 8 9 10 |
#inner { display: table; margin: 0 auto; border: 1px solid black; } #outer { border: 1px solid red; width:100% } |
This solution work for IE8+ too. Of course it work well on Chrome and Firefox.
If you run the above html on web browser you will see the result like this
Run your own and enjoy. Welcome any comment 🙂