h5中实现input的placeholder垂直居中显示

设计师在设计input的时候，往往会设计input里面有值和没有值时的字体不一样，比如下图

input

上图文字大小为72px，下图文字大小为48px，如果仅仅使用input的属性来设置css属性，无法达到设计效果，会出现placeholder文字偏下的问题，如下图：

fact

为了实现placeholder文字居中又不影响input输入文字的UI效果，于是，我给input的placeholder设置为空字符串，重新定义了一个div控件，这个div控件里面的内容填上所需要的placeholder的文字，通过监听input里面文字是否为空来隐藏和显示div里的文字内容，代码如下

<div v-show="money === ''" class="placeholder">请输入转入金额</div> 

.placeholder{

  position:absolute;

  font-size:48px;

  font-family:PingFangSC-Semibold;

  color:rgba(204,204,204,1);

  height:66px;

  line-height:66px;

  padding-top:47px;

  padding-left:62px;

}

修改之后的显示效果如下：

success