homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Vertical centering of DIV

10+ Year Member

Msg#: 3080995 posted 3:04 am on Sep 13, 2006 (gmt 0)

When a user clicks a button (such as to upload an image) I would like to overlay a DIV that is vertically aligned in the middle of the page that shows feedback (i.e. "Uploading...Please wait").

I'm clueless, I was thinking maybe displaying the container div as a table, and using vertical-align, but i'm not sure this will do it.

Any ideas?



10+ Year Member

Msg#: 3080995 posted 3:42 am on Sep 13, 2006 (gmt 0)

If it's fixed-width, fixed-height, this can be done quite easily.

You want it positioned over the top of everything else, so:

  1. fix the width and the height of the div;
  2. absolutely position;
  3. set left and top to 50%;
  4. set negative margin which is half the amount (e.g. if width = 600px, height = 300px, set margin-left = -300px, margin-top = -150px); and
  5. set your z-index higher than your other elements, to position it above everything else.

That's it :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved