如何基于特定元素居中div而非整体子容器？

要让child-container里的特定元素（这里是中间的<p>Center this</p>）成为垂直居中基准，而非整个容器居中，可以利用Flex布局的自动margin特性实现，完美适配上下元素高度动态变化的场景。

实现思路 #

保持外层.container的Flex垂直居中设置不变，通过给首尾两个<p>元素设置自动margin，将中间元素"挤"到容器的垂直中心位置。

完整代码示例 #

CSS代码

.container {
  display:flex;
  align-items: center;
  height: 300px;
  background-color: red;
}

.child-container {
  display: flex;
  flex-direction: column;
  background-color: purple;
  width: 100%; /* 按需调整宽度，确保布局生效 */
}

/* 第一个p自动占据上方剩余空间，推中间元素下移 */
.child-container p:first-child {
  margin-bottom: auto;
}

/* 最后一个p自动占据下方剩余空间，推中间元素上移 */
.child-container p:last-child {
  margin-top: auto;
}

.big{
  line-height:40px;
}

.bigger{
  line-height:80px;
}

HTML代码

<div class="container">
  <div class="child-container">
    <p class="big">Lorem ipsum</p>
    <p>Center this</p>
    <p class="bigger">Lorem ipsum</p>
  </div>
</div>

原理说明 #

Flex布局中，margin: auto会自动填充元素所在轴向上的剩余空间。给第一个<p>设置margin-bottom: auto，它会占据中间元素上方的所有剩余空间；给最后一个<p>设置margin-top: auto，它会占据中间元素下方的所有剩余空间。不管首尾元素高度如何动态变化，中间元素始终固定在.container的垂直中心位置。

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