SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering <div> in browser window

    I have a fixed size <div> that I would like to have centered vertically and horizontally in the browser window. I am able to get it centered horizontally, but cannot figure out how to get it to center vertically. Any ideas?

    Thanks in advance

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could try something like this:
    Code:
    <style type="text/css" media="screen">
    html,body {
     height: 100%; 
    }
    .centre {
     position: absolute;
     left: 50%;
     top: 50%;
    width:300px;
    height:300px; 
    margin-top: -150px; /* make this half your div height */
     margin-left: -150px; /* make this half your div width */
    }
    </style>
    You will need to test in the browsers you wish to support but it works ok in IE6, mozilla 1.2 & Opera7.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •