Four ways to center in CSS

The centering recipes worth knowing, from the margin trick to place-content.

.wrapper {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.hero {
  display: grid;
  place-content: center;
  min-height: 60vh;
}

.modal {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

How it works

1. margin-inline: auto with a width centers a block.
2. Grid with place-content: center centers in both axes.
3. The transform recipe still wins for an absolute box.

Keywords and builtins used here

• display
• grid
• hero
• modal
• position
• rem
• transform
• translate
• vh
• wrapper

The run, in numbers

Lines

18

Characters to type

252

Tokens

64

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 45 seconds.

Type this snippet

Step 6 of 7 in Positioning, step 22 of 24 in Flexbox & grid.

← Previous Next →