Usage

HTML

<div class="l-center" style="--cr-max-width: var(--width-40)">
  <div class="theme container">
    <div class="l-stack">
      <h1>This container has a max-width of 40rem / 640px</h1>
    </div>
  </div>
</div>

SCSS

//https://every-layout.dev/layouts/center/

.l-center {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--cr-max-width, var(--width-default));
  display: flex;
  align-items: var(--cr-align-items, initial);
  flex-direction: column;
  padding-right: var(--cr-padding, 0);
  padding-left: var(--cr-padding, 0);
}

Use this layout pattern for when you need a centered container.

Horizontal Padding

Careful that you do not set padding on a container set to width: 100%. This will cause the container to overflow its parent when the viewport is smaller than its max-width.

Setting the width

The width is intentionally unset, so it defaults to auto. It will expand to fill the width of its parent. However, the exception to this rule is if the centered container is itself the child of a flex container. In that case, the width of the centered container will be dicated by it’s contents.