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;
}
12px以下顯示問題 可以採用先整體放大，再用css3縮小的方式解決
這個沒辦法的，每種瀏覽器對
line-height渲染程度都不一樣，不只是line-height，其實平時寫垂直居中這種佈局的時候，不管用postion還是box佈局，都不能且不可能在所有機器上絕對居中贊同樓上的答案 你把字體設定成12px以上就能正常居中了我之前也是這樣處理
我們的高度與行高寫的一樣的，應該是14*1.2 = 16.8; 高度和行高都應該是16.8
但是 我們在chrome下面看見兩者的結果不一樣，說明兩者的渲染不同。而且瀏覽器對於小數點的處理方式也不一樣，所以我猜想 應該是出現誤差。 如果你想實現垂直居中的話，把高度和行高都不要寫，直接上下padding值一樣，這樣就算出現小數，也省略成一樣的。
pc上模擬器模擬出來的是垂直居中的沒錯，但是在實際手機中，蘋果手機渲染出來是垂直居中的，安卓手機渲染出來就是會偏上一些，相容的方法就是不要設定height， line-height設定為1，用padding值上下相等來保持垂直居中。
我先問下你是在微信瀏覽器中打開的吧？微信有這個bug
當字號太小時就會這樣，我也遇過，不完全居中