Vertically and Horizontally Center a Div

Here is a good solution to make vertically and horizontally center a div inside another div. We also discussed how to individually center a div in a div either horizontally or vertically later in this article.

I assume that you have a fixed width and variable/flexible height content box then below is best all-around solution I could build to vertically and horizontally center a div that works with all major browser including FIrefox, Opera, Safari, Chrome and IE 8+.

You can use a separate style sheet with following changes to accommodate for IE 7 and older:

Horizontally Center a Div

You can apply the following CSS to make the the inner div horizontally center:

Vertically Center a Div

Here is a quick CSS to vertically center a div that works in all browsers:

There are many other ways to vertically and horizontally center a div that suit as per specific requirements. We will discuss about them in upcoming articles.

You Might Interested In