在div容器中格式化div

Question

我做了一个简单的例子来测试这一点。我有一个包装器div，其他两个div元素都设置为display: inline-block;。内部的两个div元素位于同一行上，但是如何使它们居于它们所属的主要div的一半上呢？例如，主体div左侧中间的蓝色框和主体div右侧中间的红色框。下面的代码和屏幕截图。

此外，检查器显示main-box div的宽度为204像素，即使我将padding和margin设置为0，两者之间的底部仍存在间隙蓝色/红色框和main-box的边框。我如何摆脱差距？

.box-test {
  height: 200px;
  display: inline-block;
  width: 30%;
  box-sizing: border-box;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#main-box {
  text-align: center;
  border: 1px solid black;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>

Answer 1

在两个元素上都使用flexbox和margin:auto，它们将按照您的需要居中，并且您还将摆脱所有空白问题：

.box-test {
  height: 200px;
  margin:auto;
  width: 30%;
  box-sizing: border-box;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#main-box {
  border: 1px solid black;
  display:flex;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>

Answer 2

您应该使用的是包装器的flexbox。为“水平对齐方式”定义1 2 1,1 1,0 1,1 -1,0 时，您将获得所需的内容。

有关flexbox的更多详细信息，请参见here

space-around

* {
  box-sizing: border-box;
}

#main-box {
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
}
.box-test {
  height: 200px;
  width: 30%;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

Answer 3

您可以在包装器上使用属性为justify-content: space-around的flexbox。

.box-test {
  height: 200px;
  width: 30%;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#main-box {
  display: flex;
  justify-content: space-around;
  border: 1px solid black;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>

Answer 4

#main-box {
  text-align: center;
  border: 1px solid black;
  font-size:0;
}

为什么会这样？ 请阅读以下内容：

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Removing whitespace between HTML elements when using line breaks

https://jsfiddle.net/evzckd3w/