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:

Center div CSS

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.

Share your thoughts, comment below now!

*

*