Using vertical align middle for multiple lines of text

There may come a time when you want to align your text in the center of a div & display it in the exact middle making the width of your div 100% and the height fills your browser no matter what screen your on. We can easily do this with padding but this will vary depending on which screen we load the page onto.

To do this we can use the display:table; , display: table-cell; & vertical-align:middle; These cannot be used on the same div together so we have to split them up into two.

Our first class .hero uses display:table; this will act as our background colour. The second class .vertical-align uses display: table-cell; & vertical-align:middle; this will be the div that vertically aligns our content into the middle exact middle.

We also use margin:0; & height:100vh; on the body to remove any default margin’s and ensure the page is kept at 100% height of the browser.

The CSS

The HTML


Glenn Smith





© 2017, All Rights Reserved - Glenn Smith