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.