移動端 line-height 文字不居中問題解決方案
在移動端中使用 line-height=容器高度 實現文字垂直居中時，在安卓手機會發現文字偏上的問題。小編總結了兩個比較合理且簡單的解決方案；
上效果圖
從以上的效果圖中，能感覺到 “按鈕三”的文字會有輕微的向上偏移的問題（不同字號和瀏覽器的偏移大小不同）。
小編覺得 flex 方案 和 padding 方案較為簡單與合理，下面是原始碼。原始碼中有優缺點和特殊屬性的說明；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示DEMO</title>
<style type="text/css">
/* 按鈕基礎樣式 */
.btn{
height: 32px;
border-radius: 16px;
text-align: center;
font-size: 14px;
color: #fff;
width: 120px;
}
/* 水平線樣式 */
hr{
height: 0;
border: none;
border-top: #ddd solid 1px;
margin: 10px;
}
/* flex 方案 */
.flex{
line-height: normal; /* 重點：設定內容行高為 normal */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: center
}
/* padding 方案 */
.padding{
line-height: normal; /* 重點：設定內容行高為 normal */
height: auto; /* 重點：設定容器高度為 auto */
padding: 7px 0; /* 填寫一個與設計稿相近的值，不如 flex 方案精確，但是更為簡單，非強制要求下可以使用 */
}
</style>
</head>
<body>
<div class="btn flex">按鈕一</div>
<hr>
<div class="btn padding">按鈕二</div>
<hr>
<div class="btn" style="line-height: 32px;">按鈕三</div>
</body>
</html>
————————————————
版權宣告：本文為CSDN博主「黃河愛浪」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/u013350495/article/details/112428144