demo在这里：
http://jsbin.com/fihikoheno/edit?html,css,js,output
http://output.jsbin.com/fihikoheno
在安卓手机上会出现这种情况，pc没有任何问题？（ios没有测试）
不知问题出在哪？
极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html style="font-size:14px;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>哈哈</div>
</body>
</html>
*{padding:0;margin:0;}
div{
width:30px;
height:1.2rem;
line-height:1.2rem;
background:red;
font-size:10px;
color:#fff;
text-align:center;
}pc上模拟器模拟出来的是垂直居中的没错，但是在实际手机中，苹果手机渲染出来是垂直居中的，安卓手机渲染出来就是会偏上一些，兼容的方法就是不要设置height，line-height设置为1，用padding值上下相等来保持垂直居中。
这个没办法的，每种浏览器对line-height渲染程度都不一样，不仅仅是line-height，其实平时写垂直居中这种布局的时候，不管用postion还是box布局，都不能且不可能在所有机器上绝对居中
我们的高度与行高写的一样的，应该是14*1.2 = 16.8; 高度和行高都应该是16.8
但是 我们在chrome下面看见两者的结果不一样，说明两者的渲染不同。而且浏览器对于小数点的处理方式也不一样，所以我猜想 应该是出现误差。 如果你想实现垂直居中的话，把高度和行高都不要写，直接上下padding值一样，这样就算出现小数，也省略成一样的。
13 回答12.8k 阅读
8 回答2.6k 阅读
2 回答5.1k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
5 回答848 阅读
3 回答2.1k 阅读
5 回答1.1k 阅读✓ 已解决
12px以下显示问题 可以采用先整体放大，再用css3缩小的方式解决