Results 1 to 9 of 9

Thread: [CSS] centering on the screen

  1. #1

    [CSS] centering on the screen

    if I have a DIV that's 400px by 200px, how do I center it on the screen? When I try to do the following, it only centers the top left corner on the screen. I want the exact center of the DIV to be centered.

    PHP Code:
    #box {
       
    width400px;
       
    height200px;
       
    positionabsolute;
       
    top50%;
       
    left50%;


  2. #2
    Code:
    #box {
       width: 400px;
       height: 200px;
       margin: 0 auto;
    }

    *edit:

    Err.. that will horizontally center it....

    Come to think of it I dont think i've ever made something that required it to be vertically centered in the browser..... so i am unfamiliar how to do it :/

  3. #3
    I don't think it's possible to center something vertically. Without the use of Javascript of course. Even then it is a big pain with all the browsers.... Wish everyone would just use Firefox. That'd make my life.

  4. #4
    http://www.wpdfd.com/editorial/thebox/deadcentre4.html

    for fixed height and fixed width. It use to be used a lot of flash sites before people started just making them 100%x100%

    Join #kirupa | Click the ƒ under my Username | CL | Jeff

  5. #5
    Nice one temp

  6. #6
    So the solution is (in psuedo programming):

    PHP Code:
    int w 500;
    int h 200;

    #box {
       
    widthw;
       
    heighth;
       
    positionabsolute;
       
    left50%;
       
    top50%;
       
    margin: -h/2 0 0 -w/2;


  7. #7
    If you want the div centered just horizontally then use either..

    Code:
    #box {
       height: h;
       left: 50%;
       margin: -(half height)px 0 0 -(half width)px;
       position: absolute;
       width: w;
    }
    or if you don't want to use absolute positioning..

    Code:
    #box {
       height: h;
       margin: 0 auto;
       width: w;
    }
    That's the easiest way to do it horizontally. However, if you want it vertically also, then the link Templarian posted is the way to go.

    Quick explanation of the link to get it vertically centered:
    You are going to need to nest your #box inside of another div that is positioned at "top: 50%" and then add negative margin-top to your #box (half the height to be exact).

    Hope that helps a little if there was anything fuzzy!
    Last edited by redelite; April 16th, 2008 at 10:26 AM. Reason: dumb CSS mistake 0_o

  8. #8
    Why would you need the box within another div? My solution works (at least on FF and IE7).

  9. #9
    Because if you just do "top: 50%", you aren't centering the box vertically, you are only saying *start the box 50% from the top of the page*.


    Edit: Woops.. I for some reason didn't realize there was negative margin-top .. Sorry about that
    Last edited by redelite; April 16th, 2008 at 11:10 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012