title: How to vertically center text in a block elment with changing font size?
body: <p>My usual approach to vertically center text is to use line-height equal to the container's height.</p>
  <p>Thus, the container has</p>
  <pre><code>height: 60px;
  line-height: 60px;
  </code></pre>
  <p>and the child elements have</p>
  <pre><code>line-height: 60px;
  </code></pre>
  <p>That works. But if you increase the <code>font-size</code> above 1em, that messes it up. Worse, browsers are inconsistent in how they do it!</p>
  <p>Here's a JSFiddle demo: <strong><a href="http://jsfiddle.net/tgv2rx7f/7/" rel="nofollow noreferrer">http://jsfiddle.net/tgv2rx7f/7/</a></strong>. Notice that in Firefox the big &quot;A.&quot; is too close to the top of the container. It doesn't look so bad in the demo, but on my actual website it's very noticeable and distracting. If you fix it in Firefox, then it's too low in Chrome.</p>
  <p>I can't seem to get this to work consistently no matter what I do. I've played with different <code>vertical-align</code> values, <code>top</code>, <code>text-top</code>, <code>middle</code>... no dice. I can get it to work if I change the container to <code>display:inline</code>, but in my layout it needs to be <code>block</code> or <code>inline-block</code>.</p>
  <p>PS, I can't use flex box.</p>
  <p><strong>Edit</strong>: this is what I'm seeing, both in my actual webpage (blue) and in the JSFiddle (green).</p>
  <p>Chrome:</p>
  <ul>
  <li><img src="https://i.stack.imgur.com/NhQGC.png" alt="Chrome2" />
  <img src="https://i.stack.imgur.com/ZZYoN.png" alt="Chrome1" /></li>
  </ul>
  <p>Firefox:</p>
  <ul>
  <li><img src="https://i.stack.imgur.com/PkuJm.png" alt="Firefox2" />
  <img src="https://i.stack.imgur.com/n2aJI.png" alt="Firefox1" /></li>
  </ul>
  <p><strong>Edit 2</strong>: Thanks to <code>andyb</code> for pointing out the fact that using <code>em</code>s will change the size of a container set with <code>px</code>. It also helped bring to light another complication, namely that browsers treat font sizes and heights differently, but that seemed beyond the scope of this question, so I created a new question on that topic (<a href="https://stackoverflow.com/questions/27306894/how-to-get-consistent-line-heights-between-browsers">here</a>) and marked <code>andyb</code>'s answer as accepted.</p>