修改

Question

我发现this similar question但无法让它发挥作用。

我在CSS中标记了两个div容器作为＆＃34; box＆＃34;并且我无法让他们在他们的父div中居中（标记为＆＃34;包装＆＃34;在我的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/

修改

如果您的评论仍然是一个选项，您可以试试这个：

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

唯一的实际更改是在包装器中：

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

Answer 2

#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，并将其自动赋予了margin。很常见的情况

==== EDIT

鉴于您的评论，以下是您应该做的事情：

.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-container div包装你的.box div。这样你就有两个50％宽的容器，你的盒子位于中间位置。

https://jsfiddle.net/9mzmu6r7/4/

Answer 3

flexbox是要走的路

＆＃13;

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 auto;
}

.box {
  width:370px;
  height: 370px;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

＆＃13;

显示flex会将div并排放置，并且通过对齐内容，您可以将它们都放在中心位置。从子项中删除显示内联块以进行工作。使用mz-webkit等为旧的支持浏览器

Answer 4

Flexbox解决方案

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  width: 370px;
  height: 160px;
  margin: 5px;
  background: #aef;
}

<div class="wrapper">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

注意：如果supported browsers需要，请添加Flex供应商前缀。

在容器div

4 个答案:

修改

Flexbox解决方案