Question

我正在尝试将H1垂直居中对齐在具有背景图像的div中。

我尝试了这种方法：https://jsfiddle.net/vdqdpyc0/12/

但是发现横幅的完整高度只有在我专门为div添加px高度或者向任一元素添加填充时才可见。这意味着当我调整大小时，横幅上方和下方有很多空白区域。如果背景意图重复，这不会是一个问题，但事实并非如此。

最终产品需要like this。

html,
body {
  height: 100%;
}

.outer-wrapper {
  background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
  background-size: cover;
  max-height: 360px;
  height: 100%;
}

.inner-wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

.header-wrapper {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

h1 {
  color: #fff;
}

<div class="outer-wrapper">
  <div class="inner-wrapper">
    <div class="header-wrapper">
      <h1>
        Vertically aligned text
      </h1>
    </div>
  </div>
</div>

我可以通过减少各种响应式视点的填充，但我认为必须采用更简化的方式来实现它。

Answer 1

现在使用flexbox可以更轻松地实现这一目标，例如

html,
body {
  height: 100%;
}

.outer-wrapper {
  background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  color: #fff;
}

<div class="outer-wrapper">
  <div class="inner-wrapper">
    <div class="header-wrapper">
      <h1>
        Vertically aligned text
      </h1>
    </div>
  </div>
</div>

示例：https://jsfiddle.net/0yxctLne/

Answer 2

您可以使用flexbox。 Here是一个非常简单的flexbox指南。对于您的问题，它应该足以通过

RangeAvg(Below(Count(Distinct{1<Year = p(Year)>} [OrderID]), 0, 52))

到H1标签周围的元素，如果周围的元素与希望H1标签居中的空间的高度和宽度相同。这会将主轴定义为垂直（读取：列），然后是中心沿主轴的所有内容。如果需要，您还可以添加

display: flex;
flex-direction: column;
justify-content: center;

使文本沿横轴居中（如水平方向）。

Answer 3

你需要这样的东西吗？ Flexbox是一种很好的方式：

.header-wrapper {
  background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
  background-size: cover;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  color: #fff;
}

<div class="outer-wrapper">
  <div class="inner-wrapper">
    <div class="header-wrapper">
      <h1>
        Vertically aligned text
      </h1>
    </div>
  </div>
</div>

Fiddle

垂直居中H1，背景图像为100％

3 个答案: