css - Android 的html 不垂直居中的问题

android中 css 文字垂直居中

前言

经常有android手机出现 文字垂直不居中的情况，因此做个简单记录

原因

这个问题是因为Android的文字在content-area内部渲染的时候已经偏移了，而css的居中方案都是控制的整个content-area的居中。导致这个问题的本质原因可能是Android在排版计算的时候参考了primyfont字体的相关属性（即HHead Ascent、HHead Descent等），而primyfont的查找是看font-family里哪个字体在fonts.xml里第一个匹配上，而原生Android下中文字体是没有family name的，导致匹配上的始终不是中文字体
以下是我的实现方式，虽然还是仍有不兼容，但我已测试大多数手机可以，区分ios和android

实现

.vote-btn {
 // ios默认保持当前样式
  height: 0.32rem;
  line-height: .32rem;
  border-radius: 0.16rem;
  color: #fff;
  font-family: PingFangSC-Regular, PingFang SC;
  background: #FF6D3D;
  font-size: 0.2rem;
  font-weight: 400;
  padding: 0 .12rem;

  &.android { // android再加样式处理
    font-family: monospace; // 使用内置等宽字体样式
    box-sizing: border-box;
    border: 1px solid transparent;
  }
}

其他的如以下情况，均有不兼容情况

.tag{
	display:flex;
	align:center;
	justify: center;
}

.tag{
	height: 20px;	
	line-height: 20px
}

扩展交流

如有其他方式，欢迎评论，不喜勿喷，感谢各位大佬