The Center

Using Margins

Basic horizontal/inline margins:

Tip: only set margin-left and margin-right (or their logical equivalents) with auto so you don't override vertical spacing from a Stack layout.

There's an inner wrapper that has max-inline-size set to 60ch, marked by vertical lines. There is padding on the content, but box-sizing is globally set to border-box, which would cause padding to eat into the 60ch width, so the box-sizing is overridden for the Box to use content-box. The padding is set to 1rem, so the content width shrinks by about 2ch when border-box is used.

The first line above has 72 characters in it, but ch is measured by the width of zeros, so the variable sans-serif font can fit more than 72 characters on a line. Here are 60 zeros in the same font, for comparison:

000000000000000000000000000000000000000000000000000000000000

margin-inline-start: auto is applied to the image, pushing it to the right.

margin-inline: auto is applied to the image, keeping it in the center.

margin-inline-end: auto is applied to the image, pushing it to the left.

Techniques

Both auto margins and flexbox can be used to create a Center, but they have different behavior.

Center 1

Built with auto margins.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse sequi unde non odit, atque soluta voluptatum dignissimos, nobis deserunt harum ab commodi voluptates eaque quod architecto ullam sit magnam est.

Center 2

Built with flexbox and column flex direction.

Props

The props they use for their web component:

max — Sets the max-width. Default: "var(--measure)"
andText — Center align the text. Default: false
gutters — Minimum space on the sides of the content. Default: 0
intrinsic — "Center child elements based on their content width" (uses flexbox). Default: false

Recipes

Single-Column Website: A Box containing a Center containing a Stack.
Website with Sidebar: A Sidebar containing a Stack (sidebar) and a Center (content).
Centering Content Vertically and Horizontally: A Cover containing a Center that uses flexbox (what they call intrinsic in their props).