Javascript 即使字体大小改变，容器内的文本也要垂直对齐

我正在尝试垂直对齐：在不同字体大小的容器中居中对齐文本。以前有人问过这个问题，但我找不到任何适合我的解决方案，我遗漏了什么

我希望不同字体大小的文本在容器的中间垂直对齐。

代码如下： .

让upperGuideText=document.getElementById（“upperGuideText”）；
let guide=“此处有一些文字”
setTimeout（函数（）{
upperGuideText.style.fontSize=“3vw”；
upperGuideText.innerHTML=`${guide}`；
}, 500);
setTimeout（函数（）{
upperGuideText.style.fontSize=“5vw”；
upperGuideText.innerHTML=`${guide}`；
}, 2500);
.upperguide容器{
位置：绝对位置；
溢出：隐藏；
左：10vw；
顶部：51vh；
高度：26vh；
宽度：88vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
轮廓：0.1vw橙色虚线；
}
.上导板{
位置：绝对位置；
字体系列：“开放式Sans”，无衬线；
字体大小：粗体；
颜色：rgb（128、128、128）；
左：0.5vw；
顶部：-11.4vh；
不透明度：1；
垂直对齐：中间对齐；
}


您要求CSS做两件不同的事情，这导致了您的问题

父容器中包含的以下flexbox属性足以满足您的需要

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

当您告诉子对象占据绝对位置时，您正在破坏父对象的flexbox属性

.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; */
}


编辑：如果你想了解更多关于flexbox的神奇特性，我强烈推荐。我经常引用它
 您要求CSS做两件不同的事情，这导致了您的问题

父容器中包含的以下flexbox属性足以满足您的需要

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

当您告诉子对象占据绝对位置时，您正在破坏父对象的flexbox属性

.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; */
}


编辑：如果你想了解更多关于flexbox的神奇特性，我强烈推荐。我经常引用它
 我认为您在孩子身上使用的是绝对位置，而实际上您并不需要这样做。一旦父容器将“display:flex”作为属性，您就可以将内容与“align items”和“justify content”对齐，子容器就不需要具有绝对位置，除非出于其他目的需要


.upperguide容器{
位置：绝对位置；
溢出：隐藏；
左：10vw；
顶部：51vh；
高度：26vh；
宽度：88vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
轮廓：0.1vw橙色虚线；
}
.上导板{
/*位置：绝对位置*/
字体系列：“开放式Sans”，无衬线；
字体大小：粗体；
颜色：rgb（128、128、128）；
/*左：0.5vw*/
/*顶部：-11.4vh*/
不透明度：1；
/*垂直对齐：中间对齐*/
}
我认为您在孩子身上使用的是绝对位置，而实际上您并不需要这样做。一旦父容器将“display:flex”作为属性，您就可以将内容与“align items”和“justify content”对齐，子容器就不需要具有绝对位置，除非出于其他目的需要


.upperguide容器{
位置：绝对位置；
溢出：隐藏；
左：10vw；
顶部：51vh；
高度：26vh；
宽度：88vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
轮廓：0.1vw橙色虚线；
}
.上导板{
/*位置：绝对位置*/
字体系列：“开放式Sans”，无衬线；
字体大小：粗体；
颜色：rgb（128、128、128）；
/*左：0.5vw*/
/*顶部：-11.4vh*/
不透明度：1；
/*垂直对齐：中间对齐*/
}
从
.upperGrid
中删除
位置：绝对
，和
顶部
。因为使用“绝对”时，它是根据最近的非绝对包含块定位的。此外，该元素将从flex显示屏中取出

.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;
}

从
.upperGrid
中删除
位置：绝对
，和
顶部
。因为使用“绝对”时，它是根据最近的非绝对包含块定位的。此外，该元素将从flex显示屏中取出

.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;
}

如果我们想同时左水平对齐怎么办？如果我们想同时左水平对齐怎么办？