finds.dev← search

// the find

yanhaijing/vertical-center

★ 436 · HTML · updated May 2020

水平垂直居中,这是一道面试必考题,^_^

A reference collection of every CSS centering technique, from ancient IE6-era absolute+negative-margin hacks to modern flex and grid. It's a Chinese-language interview prep resource — the README is a comparison table of 10 approaches with browser compatibility ranges. Aimed at frontend developers who want to see all the options side by side.

The compatibility table is genuinely useful — it's specific about which IE version, which Android WebView version, not just vague 'modern browsers' hand-waving. Having each technique as a standalone runnable HTML file means you can open any one and inspect exactly what's happening. The decision guide at the bottom (pick absolute+negative-margin for fixed-size on PC, flex for mobile) is practical and opinionated rather than 'it depends'.

Last touched in 2020, so there's no mention of `place-items: center` on a grid container, which is now the simplest one-liner for most cases. The writing-mode trick is listed without any caveat that it breaks text direction and is essentially a hack nobody should use in production. No CSS custom properties, no container queries context, no discussion of centering within scroll containers — all common real-world complications that would actually trip someone up.

View on GitHub → Homepage ↗

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →