Hey there! I'm still learning the ropes, but I could really use a hand with this issue:
So, while I was playing around with HTML and CSS, I wanted to create a page with a fixed size that would be perfectly centered on the screen. My approach was to position the [body] tag by setting its position to relative and then adjusting it like this:
position: absolute;
padding: 1em;
width: 960px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
Unfortunately, things didn't turn out as expected, and here's what I ended up with:
I had hoped to see the yellow box flawlessly centered both horizontally and vertically, yet it seems slightly off. I've tested the page on Safari, Firefox, and Chrome, and the results are consistent, so I have a feeling it's my mistake :-)
Could you please lend me some guidance on where I went wrong? Thank you so much!
Here's the full HTML+CSS code for the page I created:
<!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>