center-ish: 50 ways to vertically center content on a webpage, mostly wrong

A field guide to centering content vertically on a webpage. The way it's done in the field. By people who are angry. Each technique is its own page. The dotted lines on each preview shows where the center is actually located. Compliant with the Department of Internet Things' IE5-compatibility mandate. We support exactly one (1) browser. It was released in 1999. We are not allowed to upgrade it. Why use one row when you can use fifty and put the content in row 25, give or take. With no positioned ancestor, an absolute + translate(-50%, -50%) child is positioned against the viewport which centers it correctly! Until someone, anywhere up the tree, types position: relative. The container picks an alignment three times. The child overrides three times. The last declaration on each side wins. Centered, eventually. One line of text inside a line box that's 100vh tall ends up vertically centered. Add a second line and each one is 100vh tall. The page becomes a stairway. Vertical-align: middle

saved by

• Denys