469,338 Members | 8,181 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,338 developers. It's quick & easy.

<div> positioned at center of the screen?

1
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
Nov 3 '06 #1
1 19290
steven
143 100+
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
Nov 10 '06 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by Gustaf Liljegren | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by Purva khokhar | last post: by
1 post views Thread by haryvincent176 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.