Learn HTML-CSS: How To Horizontally Center a Block Element div in a div?


Have you worked with div blocks? If yes, you already know how simple they can be. However, complexity can arise due to how you can stack simple concepts on top of one another. If you are looking to center a block element div in a div horizontally, then just use the following CSS code:

The above code is for inner div of your HTML. We are using CSS to do the centering. The outer div can be of any width, all the way to 100%. All you need to make sure of is that the inner div width is less than the width of the outer div.

The magic line here is margin: 0 auto,  which centers the inner div.

What should you do if you want to make it work for IE8?

We all know supporting IE8 can be a pain. For the above to work in IE8, you need to use the following CSS.

As div is a block-level element, the above CSS will work flawlessly.

Do you have anything to add to the tutorial? Then comment below and let us know.

You can also check on our website for videos about HTML/CSS. Below are some examples:

  • HTML5 App Development (part 1) – HTML5


You can also follow some of our broadcasters who program in HTML-CSS as below:



Another cool way to find out interesting things about HTML/CSS is to access our project page!

About author

About Author Dr. Michael Jurgen Garbade is the founder of LiveEdu.TV, Kyuda, Education Ecosystem. He is future Venture Capitalist, Future Politician and always on the lookout for the Next Big Challenge. Obtained Masters in business administration and physics, and a Ph.D. in finance with professional work experience in high-paced environments at Fortune 500 companies like Amazon and General Electric. Expertize: Python, PHP, Sencha Touch & C++, SEO, Finance, Strategy & E-commerce. He speaks English and German and has worked in the US, Europe, and Asia. At Education Ecosystem he is the CEO and runs business operations.