Align DIV to the Center of Screen – Cross Browser Method

Recently one of the TechWelkin readers commented that aligning DIV elements is too much of a problem and using TABLE element is much better. If you want to put two text pieces side-by-side, it is easier to do with TABLE. Well, new developers always feel that way! But as they gain more experience and learn new things, they realize that DIV elements are highly flexible and pretty easy to use. Newbies often ask, “how to align and float a DIV element right in the center of the screen?“. This problem has three parts:

1. Align div element to the center horizontally
2. Then align div element in the middle vertically
3. And finally float the div, so that it stays in the center of the screen when the user scrolls the screen.

Such an arrangement is often required when you want to display a “message box” DIV. Message boxes on webpages are traditionally shown in the middle of the screen to get the maximum attention from the visitor. Let’s learn how to align a DIV in the middle of your browser screen. Let’s begin with simpler thing:

This is the most straightforward. All you need to do is to set left and right margins as auto. Browser will detect this CSS property and automatically do the horizontal alignment. For example:

#my-div{
margin: 0 auto;
width: 400px;
}

Take notice that you would need to give a definite width to the div element because without specified width, div element occupies the entire width of the screen. As a result, without specified width, you would not be able to notice the center alignment.

This is a bit tricky thing. There are several options available to do the vertically middle alignment of div element —but the best and cross-browser solution is mentioned by Billbad on StackOverflow:

HTML

<div class="outer">
<div class="middle">
<div class="inner">Content</div>
</div>
</div>

CSS RULES

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}

TechWelkin.com also publishes Web Development Tips and Tutorials.

The above CSS rules will work in all major browsers, except, of course, older versions of Internet Explorer. As we all know, Internet Explorer has its own rules! So, unfortunately, we have to define different set of properties for IE. You’ll have to conditionally add a separate CSS file that will contain rules to be followed by IE.

CONDITIONALLY INCLUDE STYLESHEET

<!--[if lte IE 7]><link href="style-ie.css" rel="stylesheet" /><![endif]-->;

CSS FOR IE

.outer {
    display: inline;
    top: 0;
}

.middle {
    display: inline;
    top: 50%;
    position: relative;
}

.inner {
    display: inline;
    top: -50%;
    position: relative;
}

The key to the above method are the CSS rules of the middle div. Many of you must have tried vertical-align property to vertically align a div. But most of you would not have succeeded! The reason is that this property works on table cells and not on a div element with block display. The default display of a div is block, so when you create a div and try to vertical-align it to middle —it will not work. You would first need to set the display property of the div to table-cell.

The outer div in above solution also plays an important role. It occupies the entire browser area with both width and height set to 100%. The outer div creates a playground for the middle div so as the middle div has the whole screen to itself and it can shift anywhere without any other element coming in its way. The position property ensures that the outer div floats when user scrolls the screen.

The combined effect of outer and middle div is that they vertically center align the inner div. Then the inner div horizontally center align itself; making the inner div visible right in the center of the screen.

I hope it answered your question. Please feel free to ask questions. Thank you for using TechWelkin!