在移动端中使用 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;
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