如何将div居中?

Question

你可以看到，总高度是1000px，在他们的3个框中，总高度是600px。我要做的是把最后一个盒子放在盒子2和容器末端的中间。好的解决方案是margin: "auto 0"到box3，但它不起作用。

我怎样才能得到那个结果?

.container {
width: 1000px;
height: 1000px;
background: black;
}
.box1 {
width: 100%;
height: 200px;
background: red;
}
.box2 {
width: 100%;
height: 200px;
background: blue;
}
.box3 {
width: 100%;
height: 200px;
background: green;
}

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

Answer 1

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="center">
<div class="box3"></div>
</div>
</div>

这样做是最简单的，只要给中心类设置以下样式:

.center{
display:flex;
justify-content:center;
align-items:center;
height: 600px;
}

Answer 2

使用CSS Flexbox:

.center-content {
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
}

例子