How to center vertically and horizontally

Posted on
web tech

Many blog post on talk about how to center divs either or vertically or horizontally, both using css and javascript.
Would you believe me that I can make a div center both ways with three lines of code?

Don’t believe me, check it out, in the css file.

body {
width: 100%;
height: 100vh;
}

First now we need to add the size of the body.

body {
width: 100%;
height: 100vh;
display: grid;
}

There the magic word.
body {
width: 100%;
height: 100vh;
display: grid;
justify-items: center; #Center_horizontally
align-items: center; #Center_vertically
}

That’s it, done.