title: Vertical text alignment not working for some font sizes
body: <p>I am making a window where the components need to scale according to the height of the window, as the user resizes it.
  To this end, I have some JS to update the css style of the components whenever the window changes size.</p>
  <p>For one of the components, I want the text inside it to be centered, but for some font sizes, the text is placed too high up:
  <a href="https://i.stack.imgur.com/BfjH6.png" rel="nofollow noreferrer">Bad vertical alignment example</a>
  I scaled up this example to make it more clear. There are 1px of space above the text, and 3px below.</p>
  <p>I have tried</p>
  <ul>
  <li>setting lineHeight = height, and vertical align center</li>
  <li>setting display flex, align-items center, and wrapping the text in a child div/span.</li>
  <li>setting lineHeight = 1, and appropriate padding top/bottom (same values)</li>
  </ul>
  <p>In all situations above, I also set height and font-size to a value that matches the current window height. I also tried avoiding fractional font sizes, by having the font size rounded to the nearest integer.</p>
  <p>It all works in most situations, but there are always some window sizes where the alignment messes up. Particularly for smaller window sizes.</p>
  <p>The html consists of a display flex div with button elements, each containing the text to be centered.</p>
  <hr />
  <h3>Edit 1:</h3>
  <p>I reproduced it in this fiddle: <a href="https://jsfiddle.net/Lz7p2joy/6/" rel="nofollow noreferrer">https://jsfiddle.net/Lz7p2joy/6/</a></p>
  <pre><code>&lt;div class=&quot;strip&quot;&gt;
    &lt;button&gt;SBO&lt;/button&gt;
    &lt;button&gt;PIN&lt;/button&gt;
    &lt;button&gt;ISN&lt;/button&gt;
  &lt;/div&gt;
  
  .strip{
    display: flex;
    float: left;
    margin-left: 5px;
    border-radius: 5px;
    border: 1px solid #3F3F46;
    overflow: hidden;
  }
  
  button{
      font-size: 8px;
      line-height: 10px;
      height: 10px;
      padding: 0px 3.8452px;
      text-align: center;
      
      background-color: #007ACC;
      color: #F1F1F1;
      border: none;
      border-right: 1px solid #3F3F46;
      border-radius: 0;
  }
  </code></pre>
  <p>It is subtle, but there are 3 px of space below the text, and 1px above. This might depend a bit on the computer/monitor/browser it is run on. I have seen some worse examples on users' machines (Might be related to windows display scaling).</p>