Menu
I know how I can horizontally center the entire page with CSS. But is there a way to vertically center the page? Something like this...
600
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
You can also hijack CSS's display: table and display: table-cell for this purpose. The HTML would be like this:
<body>
<div id="body">
<!-- Content goes here -->
</div>
</body>
And the CSS:
html,
body {
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
If you want horizontal centering as well, then add this:
#body {
max-width: 1000px; /* Or whatever makes sense for you. */
margin: 0 auto;
}
Some would call this an abuse of CSS but:
References:
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
