h5页面字体位置居中的难题

h5页面中字体的位置可能会出现跳动的情况，目前面临的困境是：

• 安卓手机屏幕上的字体位置正确（图1）；
• ipad屏幕上的字体位置发生偏移（图2）；

期望效果是将字体位置固定在图1所示的位置。

十个android安卓手机图标

android 安卓手机 地球 手机图标

下载

解决方案

经过 بررسی，发现问题关键在于.btn元素的宽度设置。将.btn元素的width属性删除，并使用padding属性来撑开盒子，即可解决字体位置偏移的问题。

修改后的代码如下：

.btn {
  height: 36px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  font-size: .16rem;
  position: absolute;
  left: 50%;
  bottom: 15%;
  transform: translate(-50%, -50%);
  color: #fff;
  padding: 0 40% 0 40%; // 使用padding撑开盒子
}