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