How to horizontally center a div inside a div using css

Yes its very easy to center a block element inside other block element. Here is an example.

If you have following HTML code:

1
2
3
<div>
    <div></div>
</div>

This is how we make innerDiv center horizontally.

1
2
3
4
5
6
7
8
9
10
11
12
13
.outerDiv{
width:100%
}
.innerDiv {
    width: 980px;
    margin: 0 auto;
}

if you are using IE8+ you have to do things like.

.innerDiv {
   display: table;
}
Share:

Related Articles:

This entry was posted in CSS, Resources and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>