Build it

Centre the glyph in the round action button

EasyAlignment

A 56px circular button with a 20px icon in it, and the icon sits up in the top-left like a badge. At this size being four pixels out is visible from across the room.

Centre .glyph inside .fab on both axes. It has to survive the button being resized — the design system ships a large variant.

Hint

The box is small, but is the question any different from centring something in a 600px panel?

Live preview1000×700

Your stylesheet

checked in a real browser, four ways

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="fab"><span class="glyph"></span></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; }
.fab { width: 56px; height: 56px; margin: 40px; border-radius: 50%; background: #7cd4a0; }
.glyph { display: block; width: 20px; height: 20px; background: #0b0b0f; }