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.