如何在嵌套div间定位标题？div-2尺寸可变，纯CSS/SCSS实现

这问题我之前做项目时也碰到过！其实不用纠结固定尺寸或者复杂的计算，用CSS Flexbox就能轻松搞定，完美适配div-2的动态尺寸变化，完全不需要JS介入。

核心思路：利用Flexbox的自动空间分配 #

我们可以抛弃原来的top:50% + transform居中方式，改用Flexbox来同时实现div-2的居中，以及标题在两个div顶部之间的中间定位。具体步骤如下：

HTML结构

保持你原来的层级结构就行：

<div class="div-1">
  <h3 class="title">我的标题</h3>
  <div class="div-2">
    <!-- 这里放动态变化的内容，尺寸会自动调整 -->
    动态内容区域，高度宽度随时变
  </div>
</div>

CSS实现

.div-1 {
  /* 给容器设置基础尺寸，你可以根据需求调整，或者用百分比/视窗单位 */
  width: 500px;
  height: 700px;
  border: 2px solid #eee;
  /* 关键：开启Flex垂直布局 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 让所有子元素水平居中 */
  justify-content: center; /* 让div-2垂直居中在容器里 */
}

.title {
  margin: 0; /* 清除默认的标题外边距，避免干扰 */
  /* 核心属性：自动分配标题和div-2之间的空间，让标题到容器顶部的距离 = 标题到div-2顶部的距离 */
  margin-bottom: auto;
}

.div-2 {
  /* 不需要原来的定位代码了，Flexbox自动帮你居中 */
  padding: 30px;
  border: 2px solid #2196f3;
  /* 这里模拟动态尺寸，你可以随便改高度宽度，标题位置会自动调整 */
  /* 比如试试把height改成200px或者400px */
  height: fit-content;
  width: fit-content;
}

为什么这个方案有效？ #

在垂直方向的Flex布局中，margin-bottom: auto会让浏览器自动计算标题下方的可用空间，把标题“推”到容器顶部和div-2顶部的正中间位置。不管div-2的高度怎么变化（比如内容增加/减少），这个空间分配都会自动更新，完全不需要手动计算尺寸。

如果你想保留原来的div-2定位方式 #

要是你因为某些原因必须保留top:50% + transform的居中方式，也可以用绝对定位结合CSS变量实现（需要少量JS辅助更新变量）：

.div-1 {
  position: relative;
  width: 500px;
  height: 700px;
  border: 2px solid #eee;
}

.div-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
  border: 2px solid #2196f3;
}

.title {
  position: absolute;
  left: 50%;
  /* 关键：让标题的垂直中心刚好在容器顶部和div-2顶部的中间 */
  top: calc(50% - var(--div2-height)/2);
  transform: translate(-50%, -50%);
  margin: 0;
}

不过这个方案需要用JS动态获取div-2的高度并赋值给--div2-height变量，不如纯Flexbox方案省心，所以更推荐第一种方法。

你可以直接复制代码测试一下，调整div-2的尺寸就能看到标题自动适配的效果啦！

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