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;
 }

问题是如果我设置最小高度：100％的容器而不是设置高度：100％旋转器不再垂直对齐中心。

为什么我要换到最小高度：100％？因为当视口扩展或缩小时，容器下方的页脚会重叠内容。

我搜索过，发现Explorer存在问题。但我使用mozilla firefox 49.0 这有解决方法吗？

EDIT。我的标记工作正常。问题是flexbox对齐项目。看这个article。这是相同的。 EDIT2。在Chrome版本52.0.2743.116（64位）上，该问题也存在。但是，如果我是谁做错了什么高度：100％使项目正确对齐中心？

Answer 1

对项目进行弯曲，因此将图像作为弹性项目并将其指向非Flex容器的中心将无法获得您正在寻找的结果。这是一个jsbin将容器转换为flex，然后按预期对齐项目：jsbin.com/lewefiyaxi/edit?html,css,output-我可能会选择不同的解决方案，如何放置你的装载机而不是制作它是一个项目，当您的内容被注入时，您将强制在flex上布局无效，这是不合需要的。如果可能的话，你可能只想做一次换漆。

最小高度：100％以及flexbox的对齐项目：center;不要使物品垂直居中

1 个答案: