Centering Things in CSS

Recipe 1 — centre text / inline content

The simplest case: to centre the text or inline content inside a box, put text-align: center on the box itself.

<style>.a { text-align: center; background:#e0e7ff; padding:14px; }</style>
<div class="a">text-align: center centres the text inside.</div>

text-align: center centres the inline content (text, images, inline elements) inside a box. It does not move the box itself — only what is written within it. Use it for headings and paragraph text.

Recipe 2 — centre a block horizontally

Sometimes you do not want to centre the text — you want to centre the whole box on the page. The recipe for that is a fixed width plus margin: 0 auto, shown here:

<style>.b { width: 200px; margin: 0 auto; background:#4338ca; color:#fff; padding:12px; text-align:center; }</style>
<div class="b">margin: 0 auto</div>

To centre the box itself (not just its text), give it a width and margin: 0 auto. The auto left/right margins share the leftover space equally, pushing the box to the middle. This centres horizontally only — and the width is essential; a full-width block has no leftover space to share.

Recipe 3 — centre ANYTHING (the modern way)

Flexbox centres both horizontally and vertically in three lines — the most reliable method.

<style>
  .c { display: flex; justify-content: center; align-items: center;
       height: 140px; background:#e0e7ff; border-radius:10px; }
  .pill { background:#06b6d4; color:#fff; padding:12px 20px; border-radius:999px; }
</style>
<div class="c"><span class="pill">Perfectly centred</span></div>

This is the most reliable recipe because it centres both directions at once. On the container .c: display: flex turns on flexbox, justify-content: center centres the pill horizontally (left↔right), and align-items: center centres it vertically (top↕bottom) within the box’s 140px height. The pill ends up dead-centre no matter its size. These three lines work for any content — text, an image, a button, anything.