Centering things on the screen is a dicey proposition -- there's a reason a LOT of developers will skip even TRYING to do it. The plethora of screen sizes -- particularly now that people are being dragged kicking and screaming back into supporting small display sizes thanks to mobile -- means that sooner or later it's going to be broken SOMEWHERE unless you dot every t and cross every i... wait, that's not right...
The first thing if you're going to center elements vertically and horizontally is that you're probably NOT going to want it to move when the page scrolls. That means position:fixed.
Centering positioned content is 'tricky'. There are several tricks and they all have pitfalls. One thing you most always need on all of them is this CSS:
html, body { height:100%; }
For an element to receive a percentage height or min-height, it's parent must have a height on it... and that includes HTML and BODY as parents.
One of the easiest methods:
<table id="centerStuff"><tr><td>
<div>Your centered stuff is this DIV</div>
</td></tr></table>
#centerStuff {
position:fixed;
top:0;
left:0;
border-collapse:collapse;
width:100%;
height:100%;
text-align:center;
vertical-align:middle;
border:0;
}
Has the advantage that the DIV can be dynamically sized and is auto-placed... the disadvantage is that it is tables for layout, which is non-semantic markup.
Another method:
<div id="centerStuff">
<div>Your centered stuff is this DIV</div>
</div>
#centerStuff {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
Works decent in modern browsers, but IE7/earlier don't know display:table-cell so if you 'need' support in legacy browsers, that's not gonna fly.
Then there's flex-box, which to be frank is SO complex I won't even go into it here, particularly since even IE9 doesn't support it.
Finally, there's this 'trick'.
<div id="centerStuff">Your centered stuff here</div>
#centerStuff {
position:fixed;
left:50%;
top:50%;
width:16em;
height:20em;
margin:-10em 0 0 -8em; /* negative margins == half width and height. */
}
Which will center that DIV by pushing it 50% across and down, then sliding it back with negative margins -- but this has the big disadvantage that you MUST specify a width and a height meaning your content MUST fit it perfectly; the antithesis of accessible layout and design.
Basically, if you can avoid it, just don't... It can be done, but you're going to have to watch it like a hawk and update it every time some new browser, screen size or different user setting comes along.
It's why there's a lot of design concepts that while "cool" -- Experienced developers won't even try to put on a website in the first place.
...
