Question

重要：

我的帖子（通常）不重复。我在Stack Overflow上发现了this，this，this和this（可能还有所有重复项）。我尝试这个帖子最常见的答案，但它不起作用。我也试过其他方法，但我无法实现目标。

所以，我有一个带文字的大div：

＆＃13;

 html, body {
    height: 100%;
}

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
}

h1 {
    font-size:350%;
}

＆＃13;

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

＆＃13;

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

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

我想我有这个问题，因为我在所有页面上显示我的（灰色）div。我尝试了一个普通的div并且代码可以工作：我的文本是垂直居中的。

简短的问题：

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

如果您有任何疑问，请告诉我。

斯芬克斯。

Answer 1

使用Flexbox，您可以在div

中垂直居中设置文字

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您也可以使用table-layout包含旧浏览器。

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  display: table
}

#dimScreen {
  background: rgba(0, 0, 0, 0.5);
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

h1 {
  font-size: 350%;
}

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

注意：vertical-align:center;不是有效值。您可能想要middle。

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

2 个答案: