title: How to vertically center on hover element text?
body: <p>I have a text element that appears over the image on mouseover. The text bit is horizontally centered but I'm still having troubles centering it vertically despite trying several techniques. Trying to achieve this without Javascript.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;figure class="wp-caption-my"&gt;
      &lt;img class="demo-my" src="image.png" alt="Image" /&gt;
      &lt;figcaption class="wp-caption-text-my"&gt;This is a caption text&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wp-caption-my {
  position: relative;
  padding: 0;
  margin: 0;
  }
  
  .wp-caption-my img {
  display: block;
  max-width: 100%;
  height: auto;
  }
  
  .wp-caption-text-my {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  left: 0;
  bottom: 0;
  padding: 0.75em 1em;
  font-weight: 700;
  z-index: 2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(0,191,255,0.9);
  text-align: center;
  -webkit-transition: opacity .3s ease-in-out !important;
  transition: opacity .3s ease-in-out !important;
  }
  
  .wp-caption-my:hover .wp-caption-text-my {
  opacity: 1;
  }
  
  img.demo-my {
  width: 100% !important;
  height: 100% !important;
  }
  </code></pre>