如何在不使用position absolute的情况下垂直居中div并放置另一个div于底部

这里提供两种简洁的现代CSS布局方案，完美满足你的需求：

方案1：Flexbox + 自动外边距（margin:auto） #

利用Flexbox的自动外边距特性，无需额外元素就能让A垂直居中，B自然留在容器底部。

代码示例 #

<div class="container">
  <div class="boxA">A</div>
  <div class="boxB">B</div>
</div>

.container {
  width: 500px;
  height: 500px;
  border: 1px solid #333;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

.boxA {
  margin: auto 0; /* 上下自动分配剩余空间，实现垂直居中 */
  width: 100px;
  height: 100px;
  background-color: #ff4444;
}

.boxB {
  width: 100px;
  height: 100px;
  background-color: #4444ff;
}

原理：当Flex容器设置为垂直方向排列时，margin: auto 0会让boxA把容器顶部到自身的距离，和自身到boxB的距离自动均分，从而实现垂直居中，boxB则会留在容器底部。

方案2：Grid布局 #

Grid布局的单元格对齐属性可以直接控制子元素的位置，代码更直观。

代码示例 #

<div class="container">
  <div class="boxA">A</div>
  <div class="boxB">B</div>
</div>

.container {
  width: 500px;
  height: 500px;
  border: 1px solid #333;
  display: grid; /* 启用Grid布局 */
}

.boxA {
  align-self: center; /* 垂直居中对齐 */
  justify-self: center; /* 可选：水平居中，根据需求调整 */
  width: 100px;
  height: 100px;
  background-color: #ff4444;
}

.boxB {
  align-self: end; /* 对齐容器底部 */
  width: 100px;
  height: 100px;
  background-color: #4444ff;
}

原理：Grid容器默认每个子元素占据独立单元格，通过align-self属性可以单独控制每个子元素在单元格内的垂直位置，无需额外布局容器或空元素。

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