Easy horizontal and vertical centering in CSS

Centering elements with CSS is completely trivial these days and this little snippet will do exactly that for you, using CSS Grid.

CSS
body {
  display: grid;
  place-items: center;
}

If you apply it to the body, make sure you add min-height: 100vh too, but also, be wary of issues that can cause with iOS.

Ko-Fi logo Enjoying this content? It’d be really appreciated if you support me on Ko-Fi by buying me a coffee.

Hello, I’m Andy and I’ll help you build fast & visually stunning websites.

I’m the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. If you’ve got a project in mind, get in touch.