Ben Borgers

⇢ Twitter

Center vertically and horizontally on the page with CSS Grid

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

  <div>center me</div>
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


Last updated January 24, 2021