title: Move div up by 50% of its own height
body: <p><strong>TL;DR:</strong> can you move a div up by 50% of its own height and still have the rest of the document flow right below it? </p>
  
  <hr>
  
  <p>I have to make a layout where there is a series of images (fixed width:height ratio) with captions (variable length of text).</p>
  
  <p><strong>I'm pretty sure I have to use flex or grid</strong>. Here are the constraints that point towards a <code>display: flex</code> container with <code>display: flex||grid</code> children:</p>
  
  <ol>
  <li>Fixed number of items per line even though screen width might vary</li>
  <li>The boxes containing the caption texts of the same line should all be of the same height, even though the text is of variable length.</li>
  <li>If a line isn't filled with images, the fewer images should just be centered (i.e. parent can't be <code>grid</code>).</li>
  </ol>
  
  <p><strong>Here's the kicker</strong>:</p>
  
  <ol start="4">
  <li><strong>The captions should be vertically centered around the bottom of their respective images.</strong> (Exactly like in the snippet below, when <code>transform</code> is enabled.)</li>
  </ol>
  
  <p><strong>Why <code>translateY</code> can't work</strong>: this would be easy to do with a <code>translateY(-50%)</code> (see snippet below) but then I don't have any control over the vertical spacing between two lines of images. If, because of the variable caption length, the caption boxes on a row are 100px tall, I'll have a 50px margin below that row, if the next row has caption boxes only 80px tall, the margin below that one will be 40px... I'm trying to get a consistent margin below each row. </p>
  
  <p><strong>The snippet</strong>: layout is correct. When <code>translateY</code> is <em>enabled</em>, captions are properly positioned in relation to their respective images. When <code>translateY</code> is <em>disabled</em>, vertical spacing between rows of images can be determined. I wish to do both.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  section {
      box-sizing: border-box;
      width: calc(100% / 3);
      display: flex;
      flex-direction: column;
  }
  .img {
      background: center / cover no-repeat url(https://cdn.pixabay.com/photo/2020/02/16/20/29/new-york-4854718_1280.jpg)
  }
  .img::before {
      content: '';
      display: block;
      padding-bottom: 65%;
  }
  .text {
      background-color: rgba(255, 255, 255, .8);
      box-shadow: inset 0 0 0 1px red;
      flex: 1;
      transform: translateY(-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
      &lt;div class="img"&gt;&lt;/div&gt;
      &lt;div class="text"&gt;&lt;span&gt;Convallis cursus ornare mus luctus varius fusce tempus arcu quisque&lt;/span&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;div class="img"&gt;&lt;/div&gt;
      &lt;div class="text"&gt;&lt;span&gt;Eleifend lorem facilisis dictumst phasellus aenean conubia libero.&lt;/span&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;div class="img"&gt;&lt;/div&gt;
      &lt;div class="text"&gt;&lt;span&gt;Nam ut gravida nisi scelerisque&lt;/span&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;div class="img"&gt;&lt;/div&gt;
      &lt;div class="text"&gt;&lt;span&gt;Ligula quisque nibh class sociosqu netus laoreet interdum volutpat mus&lt;/span&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;div class="img"&gt;&lt;/div&gt;
      &lt;div class="text"&gt;&lt;span&gt;Duis nec maecenas ultricies ridiculus nascetur nisi rutrum dignissim nam&lt;/span&gt;&lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>