问题一：按钮上下不居中
移动端项目中，遇到这样一个问题，明明写的高度和行高一致，但是在有些分辨率的手机上看上下就是不居中（如下图所示，文字靠上）。尝试过使用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: #333;
font-size:14px;
}
修改后代码：
.van-submit-bar__button{
// 批量删除按钮样式
width: 164px; // 非0数字2倍处理
height: 60px;
border: 2px solid #999999;
border-radius: 30px;
padding: 0;
background: none;
color: #333;
font-size:28px;
transform-origin: right; // 相对于原位置 靠右上下居中对齐
transform: scale(0.5); // 缩放0.5倍
}
不熟悉scale缩放的同学这里要注意一点，缩放后的元素，只是视觉上缩小了，但是实际占位的宽度还是2倍的宽度，个人用着比较好的处理方式是 为元素添加 负的margin，来调整缩放后和其他元素形成的空白间距。
下边是一些可以根据实际情况灵活使用的属性：
transform-origin: left; // 相对原位置 靠左垂直居中对齐
transform-origin: right; // 相对原位置 靠右垂直居中对齐
transform-origin: 0 0; // 相对原位置 靠左上角
margin-top:-5px; // 取决于原高度和加倍后的高度
margin-left:-5px; // 取决于原宽度和加倍后的宽度
margin-bottom:-5px; // 取决于原高度和加倍后的高度
margin-right:-5px; // 取决于原宽度和加倍后的宽度
小例子一（元素靠右对齐）：
实际展示效果：
width: 20px;
height: 10px;
代码：
width: 20px;
height: 10px;
transform-origin: right; // 相对于原位置 靠右上下居中对齐
transform: scale(0.5); // 缩放0.5倍
margin-top: -5px; // 原高度10px，使用缩放高度写成20px, 视觉上高度是10px,那么上下各多出(20-10)/2 = 5
margin-bottom: -5px;
小例子二（元素靠左对齐）：
实际展示效果：
width: 20px;
height: 10px;
代码：
width: 20px;
height: 10px;
transform-origin: 0 0; // 相对于原位置 靠右上下居中对齐
transform: scale(0.5); // 缩放0.5倍
margin-bottom: -10px; // 20-10=10