html - 在容器 div 中水平居中两个 div

Question

我找到了 this similar question但无法让它工作。

我有两个 div 容器在我的 CSS 中标记为“盒子”，我无法让它们在它们的父 div 中居中(在我的 CSS 中标记为“包装器”)

这是我的代码:https://jsfiddle.net/jord8on/fjtq28g7/

CSS:

.wrapper {
  display: inline-block;
  margin: 0 auto;
}

.box {
  display: inline-block;
  width:370px;
  height: 370px;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

如有任何帮助，我们将不胜感激!

Answer 1

你应该改变包装器的一些样式，你会很好:

.wrapper {
    display: block;
    text-align: center;
}

https://jsfiddle.net/fjtq28g7/3/

编辑

如果根据你的评论，flexbox 仍然是一个选项，你可以试试这个:

https://jsfiddle.net/fjtq28g7/7/

唯一的实际变化是在包装器中:

.wrapper {
    display: flex;
    text-align: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 3%;
}