如何实现div居中？及让box3在box2与容器底部间居中？

你用margin: "auto 0"无效，是因为默认文档流不支持垂直方向的margin: auto自动分配剩余空间，以下两种方案可以解决：

方案1：Flexbox布局（推荐，灵活适配） #

给容器开启垂直方向的Flex布局后，垂直margin: auto即可生效：

.container {
  width: 1000px;
  height: 1000px;
  background: black;
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
}

.box1 {
  width: 100%;
  height: 200px;
  background: red;
}

.box2 {
  width: 100%;
  height: 200px;
  background: blue;
}

.box3 {
  width: 100%;
  height: 200px;
  background: green;
  margin: auto 0; /* 垂直方向平分剩余空间 */
}

原理：容器总高度1000px，前两个盒子共占400px，box3自身占200px，剩余1000-400-200=400px空间。margin: auto 0会将这400px平均分配给box3的上下margin（各200px），刚好让box3处于box2和容器底部的中间位置。

方案2：手动计算margin值 #

如果不想修改布局，直接计算所需的margin-top：
剩余空间为1000-200-200-200=400px，平分后上方margin为200px：

.box3 {
  width: 100%;
  height: 200px;
  background: green;
  margin-top: 200px;
}

缺点是容器或盒子高度变化时，需要手动更新margin值，灵活性较差。

内容的提问来源于stack exchange，提问作者Eldar Tailov