This isn’t a comprehensive guide to centering things. We have that!
This is just a little observation about old and new. One of the trickier things related to centering in CSS is when you need to center both vertically and horizontally and you don’t know the width or height of what you are centering. Vertical centering being the extra tricky of the two.
Believe it or not, there was a way to do that even in IE 8. The trick was taking advantage of display: table; and that tables had this other property, vertical-align: middle;, which could be used for vertical centering.
Say all you wanted to do was center a sentence perfectly in the middle of the browser window:
...
<body>
<span>
Centered vertically and horizontally.
</span>
</body>
...You could do that like this:
html, body {
margin: 0;
height: 100%;
}
body {
display: table;
width: 100%;
}
body > span {
display: table-cell;
vertical-align: middle;
text-align: center;
}That might be the oldest trick in the Book of CSS Centering. Here it is working in IE 8:
Today we have more modern layout methods. Flexbox! CSS grid!
Here’s accomplishing the same thing with the most modern methods available:
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
We don’t even need to touch the span there! This is so cutting edge, in fact, that Microsoft Edge, which supports CSS grid, doesn’t support place-items yet. You’d have to use align-items: center; and justify-content: center; instead.
Always movin’.
Haha, “cutting edge”! I see what you did there.
In the old coolest way you don’t actually need to set a height on html or body. In the new coolest example, you can use shorthand for place-items; a single “center” will center on both axis.
I can only use methods supported by IE11 and up, so for now I like to use absolute positioning and -50% transforms…
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
IE11 supports flexbox, but has som bugs. This works:
You also can use:
Works as expected.
The problem with the translate method is that if you need to use a transform scale at some point, it doesn’t work as expected anymore.
Another problem with the translate trick is that when printing the contents of the page using this trick, the centering doesn’t work right. Since (many) printer drivers don’t support CSS transforms. At least, that’s what I found out.
I could have done with the cool new way the other day, ah well I know what to use another time.
You could avoid the (which probably should have been a
<
div>) even with the old method: set the html element as display: table and the body as display: table-cell. Then you could do all the alignment in the body itself.
Not sure how relevant it’s nowadays but at least you shouldn’t need the extra mark-up.
The new code has one major problem. As soon as you add a second block-level element such as a second paragraph, the grid creates two rows which take each the half of the viewport height and places also the paragraphs separatly centered v/h in each row. When using more paragraphs, it will require an additional wrapper.
I still prefer flexbox:
Also the flexbox way?
display: flex;
align-items: center;
justify-content: center;
:)
@Chris…. why they didn’t thought on this:
place-items: middle;
And it will align vertical and horizontal in one deceleration?
Because this is does not works. Properly use is:
place-items: center;orplace-items: center center;Read last paragraph why:
My favorite one: