Question

I am creating a login screen where there is a login box that I’d like to appear in the center of the screen (horizontally and vertically) no matter what resolution the user has.

I have looked around and can only find tutorials/articles that center content horizontally, which is half of what I want.

Any idea how I can achieve centralisation in both planes?

Answer 1

The best approach is using CSS and a Javascript callback for older IE versions.

CSS

.center {
   width: 300px;          // your login div width
   height: 300px;         // your login box height
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;   // width/2
   margin-top: -150px;    // height/2
}

HTML

<div class="center">
    Hey dude, I'm in the middle!
</div>

Live example

http://jsfiddle.net/86Asb/

Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width. This will work in all browsers except IE6,IE7 maybe.