title: Vertically align text in a span tag without specifying height?
body: <p>This is a similar question and the answers either wrap another element or specify height:
  <a href="https://stackoverflow.com/questions/732337/how-do-i-vertically-align-something-inside-a-span-tag">How do I vertically align something inside a span tag?</a></p>
  
  <p>Is it possible to do this:</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-html lang-html prettyprint-override"><code>        &lt;span style="
                    background-color:linen;
                    font-size: 2rem; 
                    font-weight: 500; 
                    padding: 2rem;"&gt;
  CENTER ME VERTICALLY
              &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And get <code>CENTER ME VERTICALLY</code> to do so without specifying height.  I can get this to work with flex box and element wrapping, but I'm wondering if there is a simpler more elegant way to do it? </p>