【CSS】テキストの上下中央寄せができない時の対処法

Android 7 以下でのみ発生するテキスト位置のずれに対処したので、その方法についてまとめ。
CSS の height プロパティと line-height プロパティを指定していたのですが、何故か文字が上にずれるという謎現象が発生していました。
そして Android 8 以上の端末や、iPhone では再現せず…。

で、調べたところ下記の記事がヒットしました。

inline-blockで上下が中央に揃えるのに時間かかった – Qiita
https://qiita.com/nagito25/items/fb0e8455a8b2fdcd480b

上記の記事によると、子要素に display: inline-block; を指定してある場合、親要素で height と line-height を指定し、子要素で vertical-align: middle; を指定すると綺麗に整うとのことでした。
具体例は下記のとおりです。

<ul>
    <li>要素1</li>
    <li>要素2</li>
    <li>要素3</li>
</ul>

CSS はこちら。

ul {
    height: 50px;
    line-height: 50px;
    padding: 0;
}
li {
    display: inline-block;
    width: calc((100vw / 3) - 6px);
    text-align: center;
    border: solid 1px;
    vertical-align: middle;
}

なお、子要素の li が 1行の場合は vertical-align: middle; を指定しなくてもOKです。
2行以上になる事が考えられる場合は必ず指定しておきましょう。

以上、テキストが上下左右中央揃えにならない時の対処法でした。
最初、ずっと子要素の li 内で height と line-height を指定していたのですが、親要素で指定しないと崩れるとは…分かりませんでした。
無事解決できてよかったです。
同じことでお困りの方の参考になれば幸いです。