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: 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 CSS RULES 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 CSS FOR IE 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!
