如何解決input placeholder和輸入內(nèi)容居中問題？

先看兩張圖：placeholder 和 輸入的內(nèi)容高度明顯不一致，輸入的內(nèi)容往下移了一部分 如何解決？

頁面結(jié)構(gòu)：

<div class="input-container">
   <input type='text' placeholder='最多3個字符 支持漢字 英文數(shù)字組合' />
    <span class="taken">被占用了</span>
</div>

.input-container {
      position: relative;
      height: 40px;
      background: #FCFCFC;
      color: #333333;
      border-radius: 6px;
      margin: 0 13% 0 10%;
      margin-top: percent(15px, 325px);
      text-align: left;
      border: 2px solid #FF9D9D;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      input {
        background: rgba(230, 176, 176, 0);
        margin-left: 10px;
        flex: 1;
        line-height: normal;
        font-size: 12px;
        color: #333333;
      }
      .taken {
        font-size: 12px;
        padding-left: 5px;
        padding-right: 10px;
        color: #DC5151;
      }
    }