CSS
Center Div Horizontally Using CSS Example
In this article, I am going to show you a very simple way to center div using css.
How to Center div using CSS:
Before I show you the markup, let’s quickly look at the output:
Example: Horizontally Center div using CSS:
<style type="text/css"> #outer { background-color: #930; padding: 15px; width: 500px; margin-left: auto; margin-right: auto; margin-top: 50px; } #inner { color: #000; background-color: #FFCFB9; padding: 10px; width: 200px; margin-left: auto; margin-right: auto; text-align: center; } </style> HTML: <div id="outer"> <div id="inner"> This is inner div. </div> </div>
Note that for the demo purposes, I have maintained the width of the outer div at 500px. You may remove/change it as you need.
That’s it!
Do you know of any other ways to Center div CSS? Feel free to share your thoughts by commenting below.