input 表单placeholder 位置垂直居中问题

问题场景

按要求制作一个金额输入框，前缀展示￥单位，input问题字体大小为 32px，placeholder的字体为 16px。UI设计要求 placeholder也要居中显示。

问题难点

需要兼容pc端与移动端

尝试过程

1. 使用了定位的方式 position: relative 设置 top值（因为使用的自适应工具，会将px计算为rem），结果失败，部分机型展示存在问题
2. 使用了 line-height: nomal 设置，没有起作用
3. 在一段时间后想到了 缩放 transform: scale(.5)

完整的实现方式

input {
    height: 32px;
    text-align: left;
    font-size: 32px;
    
    &::placeholder {
        transform: scale(.5);
        transform-origin: 0% 50%;
    }
    
    &::-webkit-input-placeholder {
        transform: scale(.5);
        transform-origin: 0% 50%;
    }
    
    &::-moz-input-placeholder {
        transform: scale(.5);
        transform-origin: 0% 50%;
    }
    
    &::-ms-input-placeholder {
        transform: scale(.5);
        transform-origin: 0% 50%;
    }
}