Html 垂直对齐div中的文本-响应窗口大小调整

我在div中有一些垂直对齐的文本，当浏览器调整大小时，我希望这些文本保持垂直居中。随着div随浏览器收缩，“我的文字”将朝div底部偏移。 有什么建议吗

下面是我所经历的问题的一个例子

HTML:

---

这就是你要找的吗

文本实际上是居中的，尽管背景图像没有居中，因此它看起来没有居中，所以这里有两个版本（fiddle use

background size:cover

）图像也居中

html，正文{
身高：100%；
}
.外包装{
背景：url（“http://paulmason.name/media/demos/full-screen-background-image/background.jpg）无重复中心；
背景尺寸：100%自动；
最大高度：360px；
身高：100%；
}
.内包装{
显示：表格；
宽度：100%；
身高：100%；
}
.标题包装{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
h1{
颜色：黑色；
}

垂直对齐的文本

问题在于你的背景，div保持不变，文本居中，你的背景让它看起来不是这样。正如加文所说，使用背景大小的封面。

你的问题实际上不是文本没有居中，因为它是。您的实际问题是，您的图像在该大小下没有足够的高度来填充容器的高度

请看下面的屏幕截图，这里我使用元素检查器突出显示了“外包装”，即您看到的蓝色框。请注意，文本在其中居中

因此，要解决实际问题，即图像要么需要填充div，要么需要保持自身居中

要保持居中，请将以下内容添加到外部包装：（）

要填充div，请从外包装中删除背景大小并添加以下内容：（）

---

你的DIV有一个设定的高度，

h1

始终保持在DIV的中心，但图片并不总是保持DIV的完整高度。更改

背景大小：封面

以了解我的意思。在@GavinThomas:的提示中，或使用此模式更改图像的背景，包含定义了

高度：auto

的图像的框将占据图像的当前高度，因此您的文本将始终居中。我不明白您所说的“当div随着浏览器收缩时，我的文本将朝div底部偏移”是什么意思。您的div上似乎有固定的高度（因此它不会随着浏览器大小的改变而改变高度），是否希望文本的垂直对齐方式随div的宽度而改变？@spoonmiser在我的小提琴中调整浏览器的大小以了解我的意思这对您合适吗？否，请观察当div收缩时，文本如何在div中不居中。@noclist它居中，而背景图像不居中，因此看起来不居中。。检查这把小提琴，背景图像也保持居中：谢谢，太好了。@noclist更新了我的答案，显示了图像如何居中

max height:360px甚至可能不是必需的。
<div class="outer-wrapper">
  <div class="inner-wrapper">
    <div class="header-wrapper">
      <h1>
        Vertically aligned text
      </h1>
    </div>
  </div>
</div>

.outer-wrapper {
  background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat left top;
  background-size: 100% auto;
  height: 360px;
}

.inner-wrapper {
  display: table;
  width: 100%;
  height: 360px;
}

.header-wrapper {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

h1 {
  color: #fff;
}

background-position: center;

background-position: center;
background-cover: cover;