Easy horizontal and vertical centering in CSS

Categories

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

Code language
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.

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me