Html – How to make the body (or div) of fixed size stay always in the center of the page (even vertically!)


I'm trying to make a 1024×768 body to stay always in the center of the page (top-bottom with same spacing, left-right too) however I'm having troubles in doing it.

I used the trick of spacing from top by 50%, then I positioned (absolutely) the body at -384px, which is half of 768.

However this method gives me a problem: if your window is smaller than 768px, you get a scrollbar but a part of the upperside of the body get cut, without any possibility to scroll up (I can still scroll down).

How to solve it?

Edit 1:
Here is some code:

Html code that can be printed on a simple html web page:

<!DOCTYPE html>
<html lang="en">
 *     Change the basic background color of the page
    background-color: blue;

 *     Set the body as a 1024 x 768 rectangle in center of the screen
    background-color:                   red;
    font-family:      TradeGothic, sans-serif;
    margin-left:                       -512px;
    margin-top:                        -384px;
    position:                        absolute;
    height:                             768px;
    width:                             1024px;
    left:                                 50%;
    top:                                  50%;
some text

Best Solution

Add this:

html {
    position: relative;
    min-width: 1024px;
    min-height: 768px;
    height: 100%;
} (fullscreen: )