Center Body Content Horizontally And Vertically With CSS
June 9, 2020 by Andreas Wik
To center the content of the body both vertically and horizontally with CSS we can use Flexbox.
So first, set display to flex. Also set the height of the body if you need to.
body {
display: flex;
min-height: 100vh;
}
Then set the properties align-items and justify-content to center.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
And that’s it.
Check out the Codepen below:
See the Pen Center body content horizontally and vertically by Andreas Wik (@andreaswik) on CodePen.
Share this article
