Ben Borgers / Posts /

Center vertically and horizontally on the page with CSS Grid

January 24, 2021 by @benborgers

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

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!

Loading...