title: Vertical align multiple lines of text to the middle
body: <p>I need to align multiple lines of text to the middle. Here is a rough guide of the markup I am working with.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;a href='#'&gt;This should be centered.&lt;/a&gt;
      &lt;li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/iTYo7.png" alt="The element that needs to be centered"></p>
  
  <p>So as you can see from my image, the "work" link should be centered vertically. I have the width and height set with <code>vertical-align: middle;</code>. I know you need to set the line height for it to actually work but theres the problem. If I set the line height to 72px (the height of the element) then some of the links will stretch down the page due to them taking up two lines.</p>
  
  <p><img src="https://i.stack.imgur.com/nmwXg.png" alt="The broken center"></p>
  
  <p>Is there a way of aligning multiple lines of text to the middle without using line-height?</p>