Ben Borgers

Center vertically and horizontally on the page with CSS Grid

October 1, 2020

Here’s how you can center this div on a page:

<body>
  <div>center me</div>
</body>
body {
  min-height: 100vh;
  display: grid;
  place-items: center center;
}

These 3 lines of CSS:

  • Make the body as tall as the device’s screen, so centering something actually looks centered
  • Indicate that you want to use CSS grid
  • Place the grid’s one ā€œitemā€ (the div) in the center vertically and the center horizontally

Subscribe to my newsletter!

A weekly round-up of new blog posts and updates to projects I’m working on.