demo在这里：
http://jsbin.com/fihikoheno/edit?html,css,js,output
http://output.jsbin.com/fihikoheno
在安卓手机上会出现这种情况，pc没有任何问题？（ios没有测试）
不知问题出在哪？
<!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>
<p>哈哈</p>
</body>
</html>
*{padding:0;margin:0;}
p{
width:30px;
height:1.2rem;
line-height:1.2rem;
background:red;
font-size:10px;
color:#fff;
text-align:center;
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The display problem below 12px can be solved by enlarging the whole first and then reducing it with css3
There’s no way around it. Each browser renders
line-heightdifferently, not justline-height. In fact, when writing a vertically centered layout, it doesn’t matter whether you usepostionorboxlayout. , cannot and cannot be absolutely centered on all machinesI agree with the answer above. You can center it normally if you set the font to 12px or above. I did it this way before
Our height is written the same as the row height, it should be 14*1.2 = 16.8; both the height and row height should be 16.8
However, we see that the results of the two are different under chrome, indicating that the rendering of the two is different. And browsers handle decimal points differently, so I guess there should be an error. If you want to achieve vertical centering, don't write the height and row height. Just use the same padding value for the top and bottom. In this way, even if there are decimals, they will be omitted and become the same.
The simulator on the PC simulates a vertically centered view, but in actual mobile phones, the Apple phone renders it vertically centered, while the Android phone renders it higher. The compatible method is not to set the height. Set line-height to 1 and use equal padding values to maintain vertical centering.
Let me ask first, did you open it in the WeChat browser? WeChat has this bug
This happens when the font size is too small. I have also encountered it. It is not completely centered