当设置input的placeholder字体大小与input字体大小不一致的时候，placeholder不能垂直居中？

Question

业务需求需要，一个input在输入的时候要要比placeholder的字体大小大很多，导致无法垂直居中，求大神解决。

.pay-card .amount{
    float: right;
    text-align: right;
    line-height: normal;
    height: 36px;
    width:150px;
    padding-right: 20px;
    color: #121212;
    font-size:36px;
}
.pay-card .amount::-webkit-input-placeholder { /* WebKit browsers */
    color:#c5c5c5;
    font-size:13px;
    line-height: 36px;
    height: 36px;
}
.pay-card .amount:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#c5c5c5;
    font-size:13px;
}
.pay-card .amount::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#c5c5c5;
    font-size:13px;
}
.pay-card .amount:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#c5c5c5;
    font-size:13px;
}

<div class="pay-card">
        <label class="label">订单金额(元)</label>
        <input type="text" class="amount" id="amount" readonly placeholder="请询问商家后输入">
    </div>

Answer 1

<script type="text/javascript">

    function aa(event) {
        var Oinput = document.getElementById('amount');
        Oinput.style.fontSize=36+'px';
        Oinput.placeholder='';

    }
    function bb(event) {
        var Oinput = document.getElementById('amount');
        Oinput.style.fontSize=13+'px';
        Oinput.placeholder='请询问商家后输入';
    }
</script>


<div class="pay-card">
<label class="label">订单金额(元)</label>
<input type="text" class="amount" id="amount"  placeholder="请询问商家后输入"  onfocus="aa(event)" onblur="bb(event)">

Answer 2

通过改变position并设置top解决问题

input::placeholder {
  top:-10%;
  font-size: 20px;
  position: relative;
}

Answer 3

遇到过这种情况。

题主可以考虑利用这种方式。
一点击输入框，触发一个change事件，修改 input框的class。
失去焦点如果内容为空，则class又改回来