Ben Borgers

Center vertically and horizontally on the page with CSS Grid

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