javascript - 您如何使用 CSS 将三个子 div 居中在父 div 中？

Question

我开始学习css。我有三个 div 包含在父 div 中。所有三个子 div 的代码都是相同的，但第三个 div 漂移到一边。如何将这些 div 置于父元素的中心？

父 div 已用黑色勾勒，以显示它的相对位置。

#parent {
  border-style: solid;
  height: 300px;
  width: 2000px;
}

#blueBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  margin-top: 50px;
  margin-left: 50px;
  padding: 10px;
  float: left;
  display: inline-block;
}

#skyBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  margin-top: 50px;
  margin-left: 50px;
  padding: 10px;
  float: left;
  display: inline-block;
}

#rainBowBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  margin-top: 50px;
  margin-left: 50px;
  padding: 10px;
  float: left;
  display: inline-block;
}

<div id="parent">
  <div id="blueBox">
  </div>
  <div id="skyBox">
  </div>
  <div id="rainBowBox">
  </div>
</div>

标签： javascripthtmlcss

Answer 1

最简单和最好的方法是 Flexbox。您可以尝试如下所示：

我从 w3schools 拿了这个，这里是来源：来源

您可以添加或删除 div，它会相应地调整。

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
</div>