如何解决这个 flex-box 垂直对齐问题？答案

【问题标题】：How to fix this flex-box vertical alignment issue?如何解决这个 flex-box 垂直对齐问题？
【发布时间】：2017-06-17 04:02:43
【问题描述】：

我正在使用 Materialize 框架。它很好用，但我想让所有页面都填满窗口（使用最小高度）。这似乎搞砸了元素的垂直对齐方式。

这是我正在使用的 CSS 代码：

.valign-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

这是我用来调整元素大小以填充窗口的方法。

function resize() {
    var heights = window.innerHeight;
    $(".fill-container").each(function () {
        $(this).css("min-height", heights + "px");
    });
}
resize();
window.onresize = function () {
    resize();
};

这是一个示例，我希望在保持垂直对齐的同时匹配窗口的高度（它处于水平状态）：

<div class="parallax-container valign-wrapper">
    <div class="section no-pad-bot">
        <div class="container fill-container">
            <div class="row center">
                <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
            </div>
        </div>
    </div>
    <div class="parallax"><img src="img/background3.jpg" alt="Unsplashed background img 3"></div>
</div>

所以问题是 除了使用弹性盒子之外还有什么好的选择吗？如果没有，那么我如何让容器在 flexboxes 使文本居中之前调整大小？

另外，这是调用 resize() 时的样子，因此您可以看到问题：

【问题讨论】：

标签： javascript jquery css flexbox materialize

【解决方案1】：

我认为有很多方法可以解决这个问题。但是你可以只使用 CSS 来申请min-height: 100vh。我只是把它放在.valign-wrapper 上，它会使包含.fill-container 的孩子居中。还应用justify-content: center 水平居中（根据您的屏幕截图）

.valign-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  justify-content: center;
  min-height: 100vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/>
<div class="parallax-container valign-wrapper">
    <div class="section no-pad-bot">
        <div class="container fill-container">
            <div class="row center">
                <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
            </div>
        </div>
    </div>
    <div class="parallax"><img src="img/background3.jpg" alt="Unsplashed background img 3"></div>
</div>

【讨论】：

工作就像一个魅力！非常感谢。

【解决方案2】：

如果您知道页面高度，我认为可以添加简单的解决方案：

$("h5").css("line-height", heights + "px");

我认为它会起作用。 :)

【讨论】：