First off, the <center> tag is deprecated in HTML5. You should replace it here with <main>, or just a plain old <div>.
Looking at your page now, I see you've attempted a solution with absolute positioning. This isn't very good if you're going for perfect centering - it's not even centered on my display! Centering things in HTML is very confusing - in fact, you can't really do it with pure HTML - but there are a few ways to do it with CSS. The simplest is to just limit the width of your body and put margin: auto; on it like so:
body {
/* This can be any unit (e.g. 420px, 70%, 69vw, etc.) 43rem is just what I use. Try out different values! */
max-width: 43rem;
margin: auto;
}
In fact, this is what I use to center
my website! It can only center horizontally, though.
My go-to method for vertical centering (which you can also see in action on my website) is using CSS Flexbox:
/* This part forces the page to be the entire height of the window, so you can center things vertically.
This is pretty much always necessary for Flexbox-based vertical centering. */
html, body {
height: 100%;
}
/* Here's the flexbox. align-items here centers things vertically and justify-content centers them horizontally. */
body {
display: flex;
align-items: center;
justify-content: center;
}
Now you can just stick everything else inside a div under the body (like you've already got) and you're done! Keep in mind this will center everything in the body, not just your div, so anything you want to position differently will need position: absolute; or similar. If this is what you want, you can also make it align the elements vertically instead of horizontally by adding:
body {
flex-direction: column;
}
You can actually do this with absolute positioning as well, but it's not quite how you've done it - I would replace the CSS on your main div with this:
/* This applies to your main div, which I see in your page has the id "divElement". */
#divElement {
position: absolute;
left: 50%;
top: 50%;
/* Keep in mind the transform property doesn't have good support in really old browsers, if you care about that */
transform: translate(-50%,-50%);
}
(Admittedly, I got this solution off
Stack Overflow, but I've tested it and it works!)
This solution will apply to
just your main div, but from my testing it's only good if you know that div is going to be shorter than the window.
You could also combine Flexbox with position: absolute; or margin: auto; (this is actually what I do), like so:
/* This uses position: absolute; and transform to center the main div horizontally, and then Flexbox to center its contents vertically. */
#divElement {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
or
/* Same as before, except with margin: auto; and a set maximum width instead of position: absolute;. */
#divElement {
max-width: 43rem;
margin: auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
With accompanying HTML changes:
<body>
<div id="divElement">
<div>
Your content here
</div>
</div>
</body>
That's about all I got. Hopefully one of these works for you. IMO, centering things is probably the most disproportionately hard thing in web development for how basic and common it is, but it's pretty simple once you get the hang of it! In theory, all these methods will center your page on not just Most Displays (TM), but every display.
And just for fun, here's a secret forbidden centering method that you should never ever use:
/* Everything about this is cursed as hell. Never do this. I am not liable if your computer explodes from using this. */
:root {
--bw: 50rem;
background-image: url("https://example.org/your-background-here");
}
html, body{
height: 100%;
}
body {
width: calc((var(--bw) / 2) + 50vw);
}
#divElement {
float: right;
width: var(--bw);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
Posts: 38/1k.beats 
Hello Melonland! 
Author
