Css 转换后继续文档流：translateY（-50%）

我需要在CSS转换后缩小差距：translateY-50%，以便内容自然流动

我尝试过其他方法，但无法将元素向上移动其自身高度的50%。负边距作为百分比是基于窗口的高度，因此这似乎不是一个选项，我也不能在以下元素上设置负边距，因为它需要基于页眉的高度

HTML:

JS小提琴：

这可能是因为只有使用Javascript才有可能实现的，但如果使用纯CSS就太好了，因为JS和媒体查询很难实现

提前感谢。

使用transform:translateY-50%而不是使用margin top:-25vh。这将把.title容器放在同一位置，同时保持.article正文在其下方齐平：

.标题{ 宽度：100%。 位置：相对位置； } .特色形象{ 宽度：100%； 高度：200px； 背景颜色：蓝色； } .标题容器{ 宽度：50%； 保证金：0自动； /*转化：translateY-50%*/ 利润上限：-25vh； 背景颜色：黄色； } 标题册 class=文章正文上方的空间太大。我希望内容在class=title container之后自然流动，但是使用translateY纯粹是视觉上的，因此有必要使用另一种方法将黄色块向上移动50%的高度

不要使用transform:translateY-50%，而是使用页边距顶部：-25vh。这会将.title容器放置在同一位置，同时保持.article正文在其下方齐平：

.标题{ 宽度：100%。 位置：相对位置； } .特色形象{ 宽度：100%； 高度：200px； 背景颜色：蓝色； } .标题容器{ 宽度：50%； 保证金：0自动； /*转化：translateY-50%*/ 利润上限：-25vh； 背景颜色：黄色； } 标题册 class=文章正文上方的空间太大。我希望内容在class=title container之后自然流动，但是使用translateY纯粹是视觉上的，因此有必要使用另一种方法将黄色块向上移动50%的高度

---

您好，这不是一个真正可靠的解决方案，因为vh基于视口高度，而视口高度将根据设备/窗口大小而变化。我想把元素向上移动它自身高度的一半。谢谢你！您好，这不是一个真正可靠的解决方案，因为vh基于视口高度，而视口高度将根据设备/窗口大小而变化。我想把元素向上移动它自身高度的一半。谢谢你！

<div class="header">
  <div class="featured-image">
    <!-- this is in place of the featured image -->
  </div>

  <div class="title-container">
    <h1>Title<br />goes<br />here</h1>
  </div>
</div>

<div class="article-body">
  <p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>

.header {
  width: 100%.
  position: relative;
}

.featured-image {
  width: 100%;
  height: 200px;
  background-color: blue;
}

.title-container {
  width: 50%;
  margin: 0 auto;
  transform: translateY(-50%);
  background-color: yellow;
}