What a WordPress theme is, and what to look for

"How do I centre a div" is the joke of the front-end world. The honest answer in 2026 is: it's a one-liner, and there are four right answers depending on what you're centring inside what.

1. Horizontal centring of a fixed-width block

The classic. Auto margins on the left and right.

.container {
  max-width: 720px;
  margin: 0 auto;
}

This is what every page wrapper does. It's the same in 2026 as it was in 2006.

2. Centring children of a flex container

The modern default for "centre this thing inside that thing", on both axes:

.parent {
  display: flex;
  align-items: center;     /* vertical */
  justify-content: center; /* horizontal */
}

Three lines, works at any size, no magic numbers. This replaces every position: absolute; top: 50%; transform: translate(-50%, -50%) hack you may have inherited from a 2014 codebase.

3. Centring with grid (the one-liner)

If you only have one child, grid is even shorter:

.parent {
  display: grid;
  place-items: center;
}

One property, both axes centred. This is genuinely the cleanest centring solution that has ever existed in CSS, and it works in every browser still in support.

4. Centring text

Don't reach for flexbox. The original tool still works:

.heading {
  text-align: center;
}

The "centre vertically in the viewport" case

For a hero section, splash page, or one-page layout that should fill the screen:

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

If you want to use the full available height accounting for mobile browser toolbars, use 100dvh instead of 100vh — supported everywhere since 2023.

What to use when

• One child, both axes → display: grid; place-items: center;
• Multiple children, in a row, both centred → display: flex; align-items: center; justify-content: center;
• Fixed-width block in a normal flow → margin: 0 auto; on the block.
• Just text → text-align: center; on the text's container.

Everything else — the negative margins, the percentage transforms, the table-cell tricks, the absolute-positioning shimmies — you can safely forget. They were workarounds for IE11.

If you're inheriting a stylesheet that's still doing it the old way, that's often a sign of a wider age problem — and worth investigating before the next browser update breaks something. We can take a look.