Firefox 中的 CSS “display: flex”/row 问题（使用引导程序）答案

【问题标题】：CSS "display: flex"/row problems in Firefox (using bootsrap)Firefox 中的 CSS “display: flex”/row 问题（使用引导程序）
【发布时间】：2015-11-30 06:31:55
【问题描述】：

我正在处理的网站在除 Firefox 之外的所有浏览器（IE、Chrome、Safari、Mobile）中都能正确显示。

在所有浏览器（Firefox 除外）中，div class="vertical-center" 中的内容在 x 轴上居中对齐并填充页面的整个宽度：

但是，在 Firefox 中，div class="row" 被挤压到页面的左侧**：

有没有办法解决这个问题并获得相同的最终结果？是不是我做错了什么？

HTML：

<section> 
    <div class="vertical-center">
        <div class="row">
            <!-- Row should fill width of "section", but does not in Firefox -->
        </div>
    </div>
</section>

CSS：

.vertical-center {
min-height: 50%;
min-height: 50vh;
display: flex; /* This causes a problem, but is required for proper display*/
align-items: center;
}

【问题讨论】：

它似乎对我有用here。您介意创建一个重现该问题的示例吗？
为简单起见，我删除了大部分代码。
我认为你将不得不使用margin: 0 auto 来获得center align jsfiddle.net/2Lzo9vfc/217
你也有 2 个min-height 所以选择一个

标签： html css twitter-bootstrap firefox compatibility

【解决方案1】：

似乎 Firefox 没有正确计算 div.row 的宽度，作为一个块元素，它应该是 100%。

所以你需要自己设置。

.vertical-center .row { width:100%; }

【讨论】：