Android解决vw/vh布局下中文文字无法垂直居中的问题

解决方法

---

说明
目前暂未发现完美解决方案。
操作步骤
①设置HTML标签：
②设置密码框CSS样式：font-family: monospace;
解释
关于第①点，请查阅下方参考1中第一条回答；
关于第②点，在android端设置" "会导致密码密码符号变小，同时，字符间距也会因此变大，参考下图：
1、设置了

2、未设置

3、设置了，
同时设置了font-family: monospace;

可以看到，再设置了，并设置了font-family: monospace;后，密码字符间距变小了很多，但是没法做到和原来一样，算是一种折中的解决方式，也尽量降低对于其它业务模块的影响。

其它

查阅了网上的其它一些解决方式并且经过本人亲测，结果如下：

方案一 设置固定字体大小
即不采用rem，vh/vw之类的自适应方案，直接设置
line-height=height(=20px)。优点就是对于某一分辨率设备来说是比较完美解决的方案，那缺点也很明显，需要针对不同分辨率设备采用媒体查询等方式进行手动适配，编写CSS工作量明显增加。

方案二 使用CSS3 scale属性
即将CSS内包含width、height、line-height之类可以设置值的属性设置为原来的2倍，然后通过scale(0.5)进行缩小，就变为和原来元素一样大小。没采用这种方式的原因是并不是在所有的android机型上都能生效，本人使用的p20 pro测试机上该方法就是不行的。

方案三 使用flex布局
不管是对原来的元素设置flex还是在外面添加父元素并设置flex属性，这种方式都行不通。

其它方案也都有或多或少的问题，可以根据自己的需求进行方案的取舍。

参考：
1、Android浏览器下line-height垂直居中为什么会偏离？
2、解决line-height=height元素高度但是文字并没有垂直居中的问题
3、移动端字体的垂直居中问题解决