如何在Safari和Chrome中将占位符文本居中？

Question

我有一个输入字段，在其中为占位符文本指定了比输入文本本身小的字体。

Demo

我为此使用了CSS：

input {
  width:200px;
  height:50px;
  font-size: 30px;
  text-align: center;
  background-color: yellow;
  text-transform: uppercase;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 12px;
}
::-moz-placeholder { /* Firefox 19+ */
  font-size: 12px;
}
:-ms-input-placeholder { /* IE 10+ */
  font-size: 12px;
}
:-moz-placeholder { /* Firefox 18- */
  font-size: 12px;
}

但是，在Safari中发生的情况是，占位符文本位于输入字段的顶部，而在Chrome中，占位符文本位于底部的底部。在Safari和Chrome中，输入文本本身都垂直居中。如何使较小的占位符文本也同时在Safari和Chrome中居中？

Answer 1

input::placeholder{
  text-align:center;
  line-height:50px;
}