CSS文本垂直对齐中心不居中

Question

重要:

我的帖子(通常)不重复.我发现这个,这个,这个和这个堆栈溢出后(也有可能所有重复).我尝试这个帖子最常见的答案,但它不起作用.我也试过其他方法,但我无法达到目标.

所以,我有一个带文字的大div:

 html, body {
    height: 100%;
}

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
}

h1 {
    font-size:350%;
}

<div id="dimScreen" style="text-align: center; vertical-align: center; display:inline-block;">
    <h1 >Big text</h1> 
</div>

我的问题是,我无法想象如何将文本放在我的灰色div的中心(垂直+水平).如您所见,文本显示在div的中心(水平),但不在垂直中心.我在身体的一部分设置了中心(垂直+水平).

在我的示例中,我尝试将文本垂直对齐所有这些帖子的最常见响应,但它不起作用.我已经尝试过其他方式,我们可以在链接的问题中找到它们,但它们不起作用:我们总是有相同的结果.

我想我有这个问题,因为我在所有页面上显示我的(灰色)div.我尝试了一个普通的div并且代码有效:我的文本是垂直居中的.

简短的问题:

如何将文本垂直居中于灰色div？

如果您有疑问,请告诉我.

斯芬克斯.

Answer 1

使用Flexbox您可以在div中垂直居中设置文本

html, body {
    height: 100%;
}

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
    text-align:center;
    display:flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-size:350%;
}

<div id="dimScreen">
    <h1 >Big text</h1> 
</div>