Jacob94 Jacob94 - 8 days ago 6
CSS Question

Vertically align text inside 100vh container

I have tried all the suggested methods I could find on this subject but cannot get any to work. I vertically aligned the image with the vertical-align/line-height method but cannot figure out how to vertically align the text boxes.

-- url removed after issue solved --

Scroll down to the 2nd or 3rd problem to see examples of the type of page I need this on. I am hoping someone with more experience than me can immediately spot where I'm going wrong, I can provide relevant snippets of code if helpful.

Thanks in advance

Answer

Put the text in a containing div and give that div the following style (note the 100vh container needs to be non statically positioned):

.vertical-center{
    position: absolute;
    top:50%;
    left: 0%;
    transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
}

This will break down if the 100vh container is smaller than the area the text would take up, so it'll need an appropriate min-height.