移动端文字垂直居中问题兼容
div > span{
position: absolute;
right: 20px;
bottom: 20px;
display: inline-block;
width: 50px;
height: 20px;
line-height: 22px;
font-size: 10px;
background-color: #eee;
text-align: center;
}
原因1：字体太小，字体大了就ok了；；；
原因2：字体大小是奇数；
解决1：安卓手机端一般，，，，line-height比height大2px就居中了，，，line-height要大一点点
这个是完美的：
height: 20px;
line-height: 21px;
font-size: 10px;
20 h 21 lh 10完美
19 h 21 lh 10也可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试移动端文字垂直居中，安卓机的兼容性</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style type="text/css">
*{
margin:0;
padding: 0;
}
/*手机居中，pc不居中*/
/*div > span{
position: absolute;
right: 20px;
bottom: 20px;
display: inline-block;
width: 50px;
height: 22px;
line-height: 22px;
font-size: 11px;
background-color: #eee;
text-align: center;
}*/
/*22 10 不居中 12
23 10 不居中 13
22 11 居中 11
23 11 居中 12 这个最好
22 12 居中
23 12 居中
19 10 不居中 ued的设计
19 11 居中
*/
div > span{
position: absolute;
right: 20px;
bottom: 20px;
display: inline-block;
width: 50px;
height: 19px;
line-height: 19px;
font-size: 11px;
background-color: #eee;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>
<div style="width: 400px;height: 300px;border:1px solid red;position: relative;">
<span>东方玄幻</span>
</div>
</li>
</ul>
</body>
</html>
与浏览器最小字体大小有关，当10的时候怎么都不居中，11就好了
