解决移动端不同分辨率下按钮上下不居中问题（scale 缩放）

移动端布局优化：按钮居中与文字单行显示问题解决方案

最新推荐文章于 2025-05-08 06:44:50 发布

原创

最新推荐文章于 2025-05-08 06:44:50 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了在移动端项目中遇到的两个常见问题：按钮上下不居中和文字超出一行显示。针对这两个问题，提出了通过调整元素尺寸、使用scale缩放及margin调整的方法来实现居中和隐藏多余文字。详细解释了transform-origin和transform: scale(0.5)的使用，并提供了具体代码示例，帮助开发者解决此类布局问题。

问题一：按钮上下不居中

移动端项目中，遇到这样一个问题，明明写的高度和行高一致，但是在有些分辨率的手机上看上下就是不居中（如下图所示，文字靠上）。尝试过使用padding代替高度，效果也不是很好。
在这里插入图片描述

问题二：文字限制只显示一行时，有的手机显示多余的部分

多行文字设置只显示一行，其余部分不显示。设置高度和行高一致，有的手机上会显示如下效果。
在这里插入图片描述
解决方法：

上边两种情况都可以用这种方式解决：
先将元素所有涉及到尺寸大小的乘以2，再用 scale 缩放0.5倍，同时结合margin调整缩放造成的空白距离。

1.解决按钮上下不居中

原代码：

.van-submit-bar__button{
   
    // 批量删除按钮样式
    width: 82px;
    height: 30px;
    border: 1px solid #999999;
    border-radius: 15px;
    padding: 0;
    background: none;
    color: #