<div> positioned at center of the screen?

[Lee99]

Hey guys,

Love the forum. Been browsing a lot, now time for my first post :-)

I'm wondering how to set a <div> tag to be center aligned to the screen, both horizontally and vertically... so it's slap-bang dead-center in the middle of the screen.

I'm creating a floating <div> layer that acts as a pop-up (before I get pounced on by you anti-pop-up crowd, it's not what you think -- it's perfectly contextually relevant to what it'll be used for, and my members want it)... and I want it to be in the center of the screen at all times, even when a user scrolls.

Do you have any javascript laying about that sets the necessary functions for both a center alignment, and a scroll wrapper to keep it aligned at the center?

Thanks! - Lee

[steven]

Hey guys,

Love the forum. Been browsing a lot, now time for my first post :-)

I'm wondering how to set a <div> tag to be center aligned to the screen, both horizontally and vertically... so it's slap-bang dead-center in the middle of the screen.

http://www.badboy.ro/articles/2005-02-20/index.php

example: http://www.badboy.ro/assets/articles/vertical_align/03.html

Read that article and the view the code of the examples. =]

You are required to use two methods to accomodate for both IE and other (standards compliant) browsers. But the outcome works fine. Of course, this is just for vertical alignment (the hard part). You can use the margin: auto property for setting the horizontal alignment. It's also a pure CSS solution, no Javascript.

A javascript solution:

http://alistapart.com/d/footers/footer_variation1.html