css - 转换后继续文档流 : translateY(-50%)

Question

我需要在 CSS 转换后缩小间隙:translateY(-50%) 以便内容自然流动。

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

HTML:

<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>

CSS:

.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;
}

JS fiddle :

https://jsfiddle.net/robertirish/tyh18orq/16/

这可能只有使用 Javascript 才有可能，但使用纯 CSS 完成它会很棒，因为 JS 和媒体查询很难实现。

提前致谢。

Answer 1

不使用transform: translateY(-50%)，而是使用margin-top: -25vh。
这将放置.title -container 在同一个地方，但保持 .article-body 在它下面齐平:

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

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

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

<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>