Six Ways to Vertically Center with CSS

By Alan Crissey

Controlling CSS layout can be tricky. Vertically centering content in particular gets a bad wrap.

The reasons for the spec being what it is is complicated. Browser viewports don’t behave like a sheet of paper. But with CSS3 being standard for close to ten years now, there are plenty of options. At least one of them should be a fit for any project.

I made a CodePen example a while back to illustrate every method I could think of at that time, which turned out to be six. I’m updating it and embedding it for the benefit of those who might be struggling.