css - 显示 :flex; cancels margins% on firefox but works on chrome

Question

我正在使用 Bootstrap 并希望在 div class="row" 中垂直居中 div class="col-md-12"。

所以我将这个类添加到我的div class="row":

.row-vertical-align {
  display: flex;
  align-items: center;
}

但是，我的 div class="col-md-12" 有 % 的边距，在 Chrome 上工作，但在 Mozilla 上不工作。

如果我删除 display:flex;，边距会恢复，但我的垂直对齐方式会消失。

你能帮我找到解决办法吗？

提前致谢。

Answer 1

您可以添加 display: table; 到父类(行)和 display:table-cell;vertical-align:middle; 到子类(col-md -12).