如何在不破坏文档流的情况下将动态高度盒子上移自身50%高度

需要实现如下CSS布局：

• 红色盒子高度为10px到150px的动态值
• 蓝色盒子（.wrapper容器）顶部需与红色盒子中部对齐

当盒子高度固定时，可通过负边距方式实现，代码如下：

.wrapper {
  margin-top:100px;
  background-color:blue;
  padding:20px;
  padding-top:0;
  max-width:250px;
  
  border:solid 1px yellow;
}

.subbox{
  height:30px;
  background-color:green;
  margin-top:30px;
}

#logo {
  height:150px;
  background-color:red;
  
  margin-top:-75px;
}

<div class="wrapper">
  <div id="logo">
  
  </div>
  <div class="subbox">
  
  </div>
  
  <div class="subbox">
  
  </div>

</div>

但由于红色盒子高度是动态的，无法确定负边距的具体数值。

曾考虑使用transformY属性，代码如下：

#logo {
  height:150px;
  background-color:red;
  transform: translateY(-50%);
}

但这样会使红色盒子脱离文档流，导致下方绿色模块出现较大间隙。

请问无需使用JavaScript，能否实现将红色盒子上移自身高度的50%，同时保持与绿色模块间距的需求？

注：有一个标题几乎相同的问题，但场景完全不同。

情况1：红色盒子高度通过CSS变量控制 #

如果红色盒子的高度可以用CSS变量定义（无论是固定值还是动态绑定的变量），可以通过calc()计算负边距，完美还原固定高度时的效果，且不会脱离文档流：

.wrapper {
  margin-top: 100px;
  background-color: blue;
  padding: 20px;
  padding-top: 0;
  max-width: 250px;
  border: solid 1px yellow;
}

.subbox {
  height: 30px;
  background-color: green;
  margin-top: 30px;
}

#logo {
  /* 定义动态高度变量，可根据需求修改或动态赋值 */
  --logo-height: 120px;
  height: var(--logo-height);
  background-color: red;
  /* 上移自身高度的50% */
  margin-top: calc(-var(--logo-height) / 2);
}

<div class="wrapper">
  <div id="logo"></div>
  <div class="subbox"></div>
  <div class="subbox"></div>
</div>

这种方法和固定高度时的负边距逻辑一致，仅用CSS变量动态计算偏移值，既实现了红色盒子上移自身一半高度的需求，又保证绿色盒子与红色盒子的间距保持正常。

情况2：红色盒子高度由内容撑开（无CSS变量） #

如果红色盒子高度是内容自动撑开的，纯CSS下可以通过两种方式实现：

方式一：transform配合调整绿色盒子margin

利用transform: translateY(-50%)让红色盒子视觉上移，同时调整第一个绿色盒子的margin来抵消间隙：

.wrapper {
  margin-top: 100px;
  background-color: blue;
  padding: 20px;
  padding-top: 0;
  max-width: 250px;
  border: solid 1px yellow;
}

.subbox {
  height: 30px;
  background-color: green;
}
/* 调整第一个绿色盒子的margin，抵消红色盒子上移带来的间隙 */
.subbox:first-of-type {
  margin-top: calc(30px - 50%);
}

#logo {
  background-color: red;
  /* 视觉上移自身50%高度 */
  transform: translateY(-50%);
}

注意：这里的50%是相对于父元素.wrapper的宽度，因此仅当.wrapper的宽度与红色盒子高度接近时效果理想。如果宽度与高度差异较大，这种方法会有偏差。

方式二：嵌套容器配合负margin

给红色盒子套一个容器，利用容器的特性实现上移：

.wrapper {
  margin-top: 100px;
  background-color: blue;
  padding: 20px;
  padding-top: 0;
  max-width: 250px;
  border: solid 1px yellow;
}

.logo-container {
  height: 0;
  overflow: visible;
}

#logo {
  background-color: red;
  /* 上移自身50%高度（百分比基于容器宽度） */
  margin-top: -50%;
}

.subbox {
  height: 30px;
  background-color: green;
  margin-top: 30px;
}

<div class="wrapper">
  <div class="logo-container">
    <div id="logo">这是动态内容，高度随内容变化</div>
  </div>
  <div class="subbox"></div>
  <div class="subbox"></div>
</div>

这种方法适合红色盒子宽高比固定的场景，若宽高比不固定，建议优先使用CSS变量方案。

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