title: line-height works incorrectly on different browsers
body: <p>I've created a <code>&lt;div&gt;</code> with <code>height:22px;</code> and <code>line-height:22px;</code> to center vertically the text.<br>
  And also an <code>&lt;input&gt;</code> with <code>height:22px;</code> (the text in the input is automatically aligned).</p>
  
  <p>I noticed that the vertical alignment is incorrect with some browser, in particular on mobile.</p>
  
  <p>There is an alternative property to center vertically the text, other than line-height?</p>
  
  <p>And how to center the text correctly in an input-box?</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-css lang-css prettyprint-override"><code>.myinput{
    width: 50px;
    height: 22px;
    font-size: 9px;
    font-family: Arial;
    text-align: right;
  }
  .mydiv{
    width: 50px;
    height: 22px;
    line-height: 22px;
    font-size: 9px;
    font-family: Arial;
    text-align: center;
    
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" class="myinput" value="EXAMPLE"/&gt;
  &lt;div style="height:10px;"&gt;&lt;/div&gt;
  &lt;div class="mydiv"&gt;EXAMPLE&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>