mostlycss
Theme

Center

.center

.center — the column a page is read in, and the gutter beside it.

Examples

The column a page is read in

View “The column a page is read in” as

Milano Centrale

Departures and arrivals, straight from the operator's own board.

<main class="center center-prose stack">
  <h1>Milano Centrale</h1>
  <p>Departures and arrivals, straight from the operator's own board.</p>
</main>

Two decisions in one class: how wide the column is, and how far the text stays from the edge of the screen.

Eight consumers of this library had written both by hand, every one of them as .wrap. It spaces nothing — that is stack, and the two compose.

A narrower one, without a second class

View “A narrower one, without a second class” as

A form is narrower than the page it sits on.

<section class="center" style="--center-max: 30rem">
  <p>A form is narrower than the page it sits on.</p>
</section>

--center-max on the element is the escape the variants do not have to anticipate, and --center-gutter: 0 is the other one — for a column that sits inside something already padded, like a dialog-body.

A band that is full width, with a column inside it

View “A band that is full width, with a column inside it” as

When is the next one

<section class="hero">
  <div class="center">
    <h1 class="hero-title">When is the next one</h1>
  </div>
</section>

A section with its own background runs the whole width and puts the column inside it, which is why hero ships no inner container.

Centring the band itself instead leaves the colour stopping short of the edge of the screen.

Tokens 2

Level 2, declared on .center itself. Set any of them on that selector to restyle this utility without touching the skin.

Level 2 tokens declared by center
TokenDefault
--center-guttervar(--space-4)
--center-maxvar(--container)

Variants and states

Variants

  • .center-full
  • .center-narrow
  • .center-prose
  • .center-wide

State it reads

None.

Before you ship it

What you have to do 4 requirements

  1. Put it on a wrapper, not on the band. A section that paints a background and carries this class stops its own colour short of the edge of the screen — which reads as a rendering fault rather than as a column.
  2. Nest it once. A center inside a center takes the gutter twice, so the inner column is 2rem narrower than it says it is. Where a region needs its own width, set --center-max on it instead of wrapping it again.
  3. Add stack when the children need spacing. This class owns the column and the gutter and nothing else; a page that wants both writes both, which is the point of two primitives rather than one page layout.
  4. Say the width in a token, not a number. If a column needs a size none of the four variants gives, --center-max takes any length — but a literal copied into two stylesheets is how eight consumers ended up with the same unexplained 46rem.

src/css/utilities/center.css · npx mostlycss add center