I know that it’s a newbie question, but if you could give me a hand and tell me what I’m doing wrong I’d really appreciate that:
While I was experimenting with HTML and CSS I decided to create a page with a fixed size that should be centered on the screen. To do so I decided to place the [body] tag by making its position relative and move it by writing:
position: absolute;
padding: 1em;
width: 960px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
Hovever it didn’t worked quite as expected, and this is the result I’m getting:
I was expecting to see the yellow box perfectly centered both horizontally and vertically, but instead I see that it’s slightly off-center.
I tried to load the page on Safari, Firefox and Chrome and I’m getting the same results so as I already suspected I know that it’s my fault 🙂
Could you help me by explaining what I did wrong ?
Thank you very much
This is the complete HTML+CSS code of the page I have written:
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="utf-8">
<style>
html, body {
padding: 0;
margin: 0;
}
html {
background-color: red;
width: 100%;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
}
</style>
</head>
<body>
This is my website
</body>
</html>
That’s because of the padding.
If you set the padding of the body to 0, it works (tested).
If you need a padding, add an internal 100% width div inside your body and give this internal div a padding.