Center

The center layout helper creates a vertical strip of content inside a given container element, with equal spacing on either side. It uses the class l-center. This technique is used on the main element (without using the l-center class, however).

Padding on the sides of the center layout helper maintains a space between its content and the edges of the parent container, even when the parent is narrower than the maximum width of the center layout.

The center layout helper uses an exception to the global box-sizing: border-box; declaration. It uses box-sizing: content-box; to prevent the padding from making the content narrower than intended.

CSS custom properties

--center-max-width

Override the default maximum width, which is set to 70rem.

--center-inline-space

Override the default horizontal padding, which is set to 1.25rem.