Full-screen vertically and horizontally centered text in CSS
This is as easily as adding one single div:
<div class="css-vh-center">
Hello World <br />
Hello World <br />
Hello World <br />
</div>
and styling it properly:
.css-vh-center {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
All the glory goes to this Stack Overflow answer.
Note that this is not using flex-box solution (see the above linked answer for details), so should work even in older pre-IE8 browsers.
Read More “Full-screen vertically and horizontally centered text in CSS”
