5 methods from web.dev

These five techniques grasped from https://web.dev/centering-in-css/.

Content centre

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

It’s concise to use the display: grid and place-content: center shorthand, which centres and justifiers children collectively.

Gentle flex

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;

Gentle flex is a truer centring-only strategy, all items are stacked, centred, and spaced. Unlike place-content: center, no children’s box sizes are changed during the centring.

Autobot

.autobot {
  display: flex;
}

.autobot > * {
  margin: auto;
}

The container is set to flex with no alignment styles, while the direct children are styled with auto margins (margin: auto working on all sides of the element).

Fluffy centre

.fluffy-center {
  padding: 10ch;
}

This is the only centring technique by far that’s entirely element owned. Great for word or phrase-centric centring, tags, pills, buttons, and more.

Pop & plop

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Absolute positioning pops the element out of normal document flow. “Plopping” that place it on top of other elements. This is a classic centring technique that’s flexible and dynamic to content size.

Vertically centring

Vertical plop

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Just the vertical part (moving along the Y-axis) of the last centring method.

Tables and vertical align

CSS supports the vertical-align property for content placed inside table cells. Better for usages in table elements only.

.container {
  display: table;
}

.item {
  display: table-cell;
  vertical-align: middle;
}

Flex items and align self

This solution gives you the freedom to vertically centre only one element inside a flexbox. It makes use of the flex property, align-self, to place the element at the centre.

.container {
  display: flex;
}

.center {
  align-self: center;
}

Flex container and margin auto

Another method to centre a single element in a flex container is setting its margin to auto.

.container {
  display: flex;
}

.item {
  margin: auto;
}

Ghost items inside a flex container

You can stack multiple items inside the flexbox and use ghost elements (content: "") to push them to the centre.

.container {
  display: flex;
  flex-direction: column;
}

.container::before,
.container::after {
  content: "";
  flex: 1;
}

Wrapping up

Reviewing these centring techniques helps me tackle different issues when replacing elements. If you have more tricks, don’t forget to share with me 🤠.