Center Something Without Copy-Pasting Stack Overflow

Before adding a centering rule, name the thing you want to move. Text inside a box, the box itself and a child inside a region are three separate jobs. Mixing their rules can make a layout appear correct without explaining why.

This page puts those cases beside one another in a single file. Save it as centering.html and open it. The button is a positioning example and has no action attached.

Compare three complete cases

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Choose the thing you want to centre</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 16px;
      font: 1rem/1.6 system-ui, sans-serif;
      color: #080b0e;
      background: #ffffff;
    }
    main { max-width: 60rem; margin-inline: auto; }
    .example { margin-block: 24px; border: 1px solid #dce3ed; }
    .text-example { text-align: center; padding: 16px; }
    .card { width: 20rem; max-width: 100%; margin-inline: auto; padding: 16px; }
    .stage { min-height: 12rem; padding: 24px; display: grid; place-items: center; }
    .item { max-width: 100%; padding: 12px; background: #f2f8ff; }
    button { font: inherit; max-width: 100%; }
    button:focus-visible { outline: 3px solid #034bff; outline-offset: 3px; }
  </style>
</head>
<body>
  <main>
    <h1>Three different centering jobs</h1>
    <section class="example text-example">
      <h2>Words inside a full-width box</h2>
      <p>The text is centred. The box still fills the row.</p>
    </section>
    <section class="example card">
      <h2>A narrower box</h2>
      <p>The card is centred; this paragraph stays left-aligned.</p>
    </section>
    <section class="example stage" aria-label="Two-axis centering">
      <button class="item" type="button">A centred control</button>
    </section>
  </main>

</body>
</html>

The first section fills the row but centres its words. The second section is a narrower card with left-aligned paragraphs. The last section centres a button horizontally and vertically inside a region with a minimum height.

Centre inline content with text-align

The first section uses text-align: center. This aligns its inline content, including text runs. It does not make the section itself narrower or move that section's outer box to the middle.

Inspect its left and right edges: they still span the main content width. Avoid applying this rule to the whole body just because the design has a centred heading. Unrelated paragraphs, lists and form labels can inherit that alignment too.

Centre a narrower block with auto margins

The card has a 20rem width, a 100% maximum and automatic inline margins. When its parent is wider than the card, the available inline space is divided between the two sides. The text inside keeps its normal alignment.

At the browser's default 16px root font, 20rem is 320px. At a 390px viewport, the example's body padding leaves 358px, so the card has approximately 19px spare on each side inside the main region. At a narrower width the maximum prevents the card from exceeding its parent.

Temporarily remove the width. A normal block generally fills the available width, leaving no visible space for the automatic side margins to divide. That is not evidence that auto margins stopped working; there is no narrower box to centre.

Centre a child in both directions

The stage uses Grid and place-items: center. Its 12rem minimum height creates vertical room for the child. The padding keeps the control away from the boundary. This is useful for a single child in a region, without absolute positioning or translate offsets.

Flexbox is another valid choice: use display: flex, justify-content: center and align-items: center. The main and cross axes depend on flex-direction, so “justify means horizontal” is only true for the usual row arrangement in the relevant writing mode.

Test content that grows

Replace the button's label with a longer sentence and increase browser zoom. The stage has a minimum height rather than a fixed height, so it can grow when its child needs more room. A fixed small height can create overflow even when the centering rules are correct.

If the result looks off-centre, compare the boxes, not just the letter shapes. Unequal padding, a margin on the child or a line-height difference can affect the visual result. Start with the container and child's bounding rectangles before adding arbitrary pixel offsets.

Change only the words

Add text-align: center to the card. Inspect its outside position before and after.

Expected result: its words become centred, but the card's outer position is unchanged. Remove the rule again if the content should stay left-aligned. This is the distinction to identify before borrowing a centering recipe. For responsive parent/child sizing, continue to measuring the box model.