html - 最小高度 :100% along with flexbox’s align-items: center; dont make items vertically center

Question

在显示内容之前，我有一个微调器，它会在 2 秒内显示，然后再更改为内容本身。

有以下Html

<div class=”container”>

    <div v-show ="!loading">
        //here content will be displayed after 2 seconds.
    </div>

    <div class="center" v-show="loading">
        <img  src="/default.svg" class="loading spinner-wrapper">
    </div>

</div>
<footer>
         //content
</footer>

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.container
{
  //height:100%; Align items vertically center Correctly
 min-height: calc(100vh - #{$footerHeight} ); //it doesnt

}

.center

{
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
 }

问题是如果我设置容器的 min-height:100% 而不是设置 height:100% 微调器不再与中心垂直对齐。

为什么我要更改为 min-height:100%？因为当视口(viewport)扩大或缩小时，位于容器下方的页脚与内容重叠。

我进行了搜索，发现 Explorer 存在问题.但是我使用的是 mozilla firefox 49.0有解决方法吗？

编辑。 我的标记工作正常。问题是 flexbox 对齐项目。看这个article .这是相同的。编辑2。在 chrome 版本 52.0.2743.116(64 位)上也存在该问题。但是，如果是我做错了，为什么 height:100% 会使项目正确居中对齐？

Answer 1

弹性发生在项目上，因此使您的图像成为弹性项目并告诉它以非弹性容器为中心不会得到您想要的结果。这是一个将容器转换为 flex 然后按预期对齐项目的 jsbin:jsbin.com/lewefiyaxi/edit?html,css,output - 我可能会选择不同的解决方案来放置加载程序它是一个项目，因为当您的内容被注入(inject)时，您将强制对 flex 进行布局失效，这是不希望的。如果可能的话，您可能只想换一下油漆。