Basic margin auto approach

.center {
  /* Remove padding from the width calculation. Probably best to set this
  globally instead. */
  box-sizing: content-box;

  /* The maximum width is the maximum measure */
  max-inline-size: 60ch;

  /* Only affect horizontal margins */
  margin-inline: auto;
}

Simple centered column page

If you're writing a very simple page with a single centered column you will want to apply a tiny bit of padding so that on mobile the text is not smashed against the side of the screen:

html {
  max-inline-size: 60ch;
  margin-inline: auto;
  padding: 3em 1em;
  line-height: 1.75;
  font-size: 1.25em;
}

Flexbox

Centering children that set their own, smaller, max-width.

The margin solution is time-honoured and perfectly serviceable. But there is an opportunity using the Flexbox layout module to support centering. That is, centering elements based on their natural, content-based widths:

.center {
  box-sizing: content-box;

  max-inline-size: 60ch;
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
}