Vertical Align Text Inside Container even when font size changes

Question

I'm trying to vertical-align: middle a text inside a container with different font sizes. This has been asked before, but I can't get any of the solutions to work for me, What I'm missing?

I want the text with different font sizes to align vertically in the middle of the container.

Here is the code: .

 let upperGuideText = document.getElementById("upperGuideText"); let guide = "Some text here" setTimeout(function(){ upperGuideText.style.fontSize = "3vw"; upperGuideText.innerHTML = `${guide}`; }, 500); setTimeout(function(){ upperGuideText.style.fontSize = "5vw"; upperGuideText.innerHTML = `${guide}`; }, 2500);

 .upperGuideContainer { position: absolute; overflow: hidden; left: 10vw; top: 51vh; height: 26vh; width: 88vw; display: flex; justify-content: center; align-items: center; outline: 0.1vw dashed orange; } .upperGuide { position: absolute; font-family: 'Open Sans', sans-serif; font-weight: bold; color: rgb(128, 128, 128); left: 0.5vw; top: -11.4vh; opacity: 1; vertical-align: middle; }

 <div class = "upperGuideContainer"> <p id="upperGuideText" class="upperGuide"></p> </div>

Answer 1

You're asking your CSS to do two different things, which is causing your problem.

the below flexbox properties that you included in the parent container are enough to achieve what you want.

.upperGuideContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

When you tell the child <p> to take an absolute position, you're breaking the flexbox properties of the parent

.upperGuide {
    /* position: absolute; */
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    color: rgb(128, 128, 128);
    /* left: 0.5vw; */
    /* top: -11.4vh; */
    opacity: 1;
    /* vertical-align: middle; */
}

EDIT: If you want to learn more about the magical properties of flexbox, I highly recommend this article . I reference it constantly.

Answer 2

I think you are using position absolute on the child when you don't really need to do it. once your parent container has "display: flex" as a property you can align things with "align-items" and "justify-content", there is no need for the child to have position absolute unless you need it to for other purposes.

 .upperGuideContainer { position: absolute; overflow: hidden; left: 10vw; top: 51vh; height: 26vh; width: 88vw; display: flex; justify-content: center; align-items: center; outline: 0.1vw dashed orange; } .upperGuide { /*position: absolute;*/ font-family: 'Open Sans', sans-serif; font-weight: bold; color: rgb(128, 128, 128); /*left: 0.5vw;*/ /*top: -11.4vh;*/ opacity: 1; /*vertical-align: middle;*/ }

As a side note, if you are using position absolute in a container inside of an absolute container, you should avoid using vh (viewport height) and vw (viewport width) as these are values coming from the viewport. I recommend using % or px instead as these are more accurate.

Answer 3

Remove position:absolute , and top from .upperGrid . Because when you use absolute it is positioned according to the nearest containing block that is not absolute. Also the element is taken out of the flex display.

.upperGuideContainer {
    position: absolute;
    overflow: hidden;
    left: 10vw;
    top: 51vh;
    height: 26vh;
    width: 88vw;   
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 0.1vw dashed orange;
}

.upperGuide {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    color: rgb(128, 128, 128);
    left: 0.5vw;
    opacity: 1;
    vertical-align: middle;
}