line-height works incorrectly on different browsers

Question

I've created a <div> with height:22px; and line-height:22px; to center vertically the text.
And also an <input> with height:22px; (the text in the input is automatically aligned).

I noticed that the vertical alignment is incorrect with some browser, in particular on mobile.

There is an alternative property to center vertically the text, other than line-height?

And how to center the text correctly in an input-box?

.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;
}

<input type="text" class="myinput" value="EXAMPLE"/>
<div style="height:10px;"></div>
<div class="mydiv">EXAMPLE</div>

Answer 1

Have you tried css flexbox? It is a great way to control the layout and placement of children within a parent div. You can learn more about it here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Below .mydiv and .myinput will perfectly center the text horizontally and vertically inside.

.myinput{
  width: 50px;
  height: 22px;
  font-size: 9px;
  font-family: Arial;
  text-align: center;
  display:flex;
  justify-content:center;
  align-items:center;
}
.mydiv{
  width: 50px;
  height: 22px;
  font-size: 9px;
  font-family: Arial;
  text-align: center;
  
  display:flex;
  justify-content:center;
  align-items:center;
  
  border: 1px solid black;
}

<input type="text" class="myinput" value="EXAMPLE"/>
<div style="height:10px;"></div>
<div class="mydiv">EXAMPLE</div>