具有居中文本和滚动的全屏背景图像答案

【问题标题】：Full screen background image with centered text and scroll具有居中文本和滚动的全屏背景图像
【发布时间】：2015-11-22 07:03:52
【问题描述】：

我正在制作一个带有全屏背景图片的单页网站，该图片也可以滚动。

Here's an example page。

Here's a git repo with all the code.

在桌面屏幕上，此代码将始终完美运行。

HTML：

<section class="test">
  <header>
  Horizontally and vertically centered text
  </header>
</section>

CSS

.test {
  background: url('img.jpg') no-repeat center center;
  background-size: cover;
  padding: 20px 0;
  height: 100vh;
}

header {
  position: relative;
  top: 38%;
  transform: translateY(-38%);
}

38% 特别适用于这种情况，很可能是因为我上面有一个导航栏。我知道 50% 会更有意义，也许有人可以进一步解释。

无论如何，尽管它在我调整大小的屏幕上看起来不错，但如果我真的在移动设备上看它，它看起来很糟糕。为了解决这个问题，我更改了代码以在标题周围添加@media screen and (min-width: 600px) {}，因此在较小的屏幕上没有应用代码。这是当前代码。

它看起来不错，但感觉很老套和不精确，所以我想知道是否有更好的方法来做到这一点，我错过了。显然我不能使用position: fixed，因为该网站涉及滚动；如果网站是一张没有滚动的全屏图片，我可以使用固定定位。

任何帮助将不胜感激！谢谢。

【问题讨论】：

标签： html css scroll responsive-design background-image

【解决方案1】：

我不太确定我是否理解正确，但如果您尝试归档文本的垂直对齐方式，您可以使用 flexbox 布局。

article {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 90vh; //100vh - navbar height 
}

【讨论】：