Vertical centring before flexbox
A box in the middle of a hero. Horizontally it took one declaration. Vertically it took an afternoon, a table, and a blog post from 2009 with 400 comments arguing about it.
Centre .card inside .hero, on both axes. It has to stay centred when the hero is a different size.
**display: flex and display: grid are refused.** This is the exhibit, not the gift shop: CSS 2.1 had no way to align anything in the block axis, and what people did instead is the content of this problem.
There are at least four honest answers. All four are accepted. They were not equivalent then and they are not now — each one costs something different, and knowing what makes place-items: center feel like the gift it is.
Hint
Which layout mode in CSS 2.1 had a property for aligning content in the block direction — and what did people have to turn their box into to get at it?
The fixture — markup and base stylesheet
You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.
<div class="hero"><div class="card"></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; } .hero { width: 600px; height: 300px; background: #16161d; } .card { width: 240px; height: 100px; background: #ffd166; }