Html 在容器分区内水平居中放置两个分区

我找到了，但没能让它工作

我有两个div容器在我的CSS中被标记为“box”，我不能让它们在它们的父div中居中（在我的CSS中被标记为“wrapper”）

这是我的密码：

CSS:

任何帮助都将不胜感激

#wrapper {
    display: inline-block;
    text-align: center;
}

.box {
  display: table;
  width:370px;
  height: 370px;
  margin: 0 auto;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

这应该可以帮到你了：D刚刚将display属性改为table，并给它自动边距。相当普遍的情况

==编辑

根据您的意见，以下是您应该做的：

.wrapper {
    display: inline-block;
    margin: 0px auto;
    width: 100%;
}

.box {
  display: table;
  width:370px;
  height: 370px;
  margin: 0 auto;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

.box-container {
  width: 50%;
  float: left;
}

然后用.box容器div包装你的.box div。这样你有两个50%个宽的容器，盒子在中间。

这应该可以帮到你了：D刚刚将display属性改为table，并给它自动边距。相当普遍的情况

==编辑

根据您的意见，以下是您应该做的：

.wrapper {
    display: inline-block;
    margin: 0px auto;
    width: 100%;
}

.box {
  display: table;
  width:370px;
  height: 370px;
  margin: 0 auto;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

.box-container {
  width: 50%;
  float: left;
}

然后用.box容器div包装你的.box div。这样你有两个50%个宽的容器，盒子在中间。

Flexbox解决方案

.wrapper{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.盒子{
宽度：370px；
高度：160px；
保证金：5px；
背景：#aef；
}

方框1
方框2

Flexbox解决方案

.wrapper{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.盒子{
宽度：370px；
高度：160px；
保证金：5px；
背景：#aef；
}

方框1
方框2

您应该更改包装器的一些样式，这样您会很好：

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

编辑 如果根据您的评论，flexbox仍然是一个选项，您可以尝试以下方法：

包装中只有实际的更改：

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

---

您应该为包装器更改一些样式，这样您会很好：

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

编辑 如果根据您的评论，flexbox仍然是一个选项，您可以尝试以下方法：

包装中只有实际的更改：

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

---

flexbox是一个不错的选择

.wrapper{
显示器：flex；
柔性流：行换行；
证明内容：中心；
保证金：0自动；
}
.盒子{
宽度：370px；
高度：370px；
左侧填充：5px；
右侧填充：5px；
垂直对齐：顶部；
}

flexbox是一个不错的选择

.wrapper{
显示器：flex；
柔性流：行换行；
证明内容：中心；
保证金：0自动；
}
.盒子{
宽度：370px；
高度：370px；
左侧填充：5px；
右侧填充：5px；
垂直对齐：顶部；
}

感谢您的快速响应！我尝试了你的建议，但是第二个盒子正在包装到下一行，而不是与另一个div“box”集中在同一层！看起来不错@leofontes！唯一的挑战是，当屏幕宽度变得太小时，我希望右侧的容器包装到下一行@daanvanham提供了这个有效的示例！（我唯一希望的是，该示例与您的示例一样间隔开！感谢您的快速响应！我尝试了您的建议，但第二个框正在包装到下一行，而不是与另一个div“box”集中在同一水平面上。）噢！看起来不错@leofontes！唯一的挑战是，当屏幕宽度变得太小时，我希望右侧的容器包装到下一行。@daanvanham提供了这个有效的示例！（我唯一想做的就是把这个例子和你的一样隔开！#非常感谢你的快速回答，它解决了我的问题！！！还有一个问题要问你@daanvanham-我如何将这两个“长方体”div隔开，使每个div的左右间隔相等？这有意义吗？这是一张图片（如果接受的话）➞ 我希望间距在第一个“席”相等的空间中等于第二个“盒子”右边的中间和相等的空间。JordaZle是Frasbox还是一个选项？我想FRISBOX仍然是一个选项。IDK我需要修改多少代码才能使它工作。ツ)_/“@jordazzle编辑了答案，只有几行，所以你绝对应该使用flexbox！#非常感谢你的快速回答，它解决了我的问题！！！还有一个问题要问你@daanvanham-我如何分隔这两个“盒子”在每个div的左边和右边有相等的间距？这有意义吗？这是一张图片（如果可以接受的话）➞ 我希望间距在第一个“席”相等的空间中等于第二个“盒子”右边的中间和相等的空间。JordaZle是Frasbox还是一个选项？我想FRISBOX仍然是一个选项。IDK我需要修改多少代码才能使它工作。ツ)_/“@jordazzle编辑了答案，它只有几行，所以你肯定应该使用flexbox！感谢你的这一观点。它工作得很好，但不幸的是我的第二个“盒子”当屏幕宽度变小时，没有换行。@daanvanham提供了一个有效的示例！jsfiddle.net/fjtq28g7/3只需添加flex flow:row wrap；在调整内容之前，您有一个：d感谢您提供了这个透视图。它很好地工作，但不幸的是我的第二个“框”当屏幕宽度变小时，没有换行。@daanvanham提供了这个有效的示例！jsfiddle.net/fjtq28g7/3只需添加flex flow:row wrap；在对齐内容之前，a有：D