Css 如何在输入文本字段中移动文本？

我已经创建了一个200x50px的输入文本字段。在该输入字段中键入的文本将自动显示在该输入字段的垂直中心。如何将其移动到该文本字段中？我试着用padding top:20px来向下移动它，但这也会使输入字段更高。当我把这个高度调小的时候，它会切掉底部的文字

您可以在以下位置查看示例：

我刚刚添加了1个输入字段：

<input placeholder="fill it in"></input>

---

现在它是200x50px高，但我想不出一种方法来向下或向上移动填充文本，而不使输入文本区域更高/更小。

之所以希望这样做，是因为我希望能够在200x50文本字段中垂直定位占位符文本和填充文本。因此，文本将在顶部，在中间或在底部的XX50输入字段。现在各种事情都发生了。例如，当我使用24px输入文本和14px占位符文本时。我希望垂直居中，但现在14px占位符文本将在24px高输入文本的底部对齐。那是铬的。在Safari中，14px高的占位符文本将出现在24px填充文本的顶部。我希望能够在所有浏览器中以我想要的方式定位这两个文本。所有这些都没有使200x50输入字段更高或更低的高度

您可以在这个代码笔中看到我的问题：

占位符文本和输入文本的字体大小不同。在Chrome中，占位符文本与输入文本的顶部对齐，在Safari中，占位符文本与输入文本的底部对齐

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

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 12px;
    text-transform: none;
}

---

我希望能够更好地控制占位符和输入文本的垂直定位方式，以便它们在所有浏览器中的定位方式相同。在固定大小的输入文本字段的垂直中心、顶部或底部。

我无法想象为什么要这样做，但如果您只想将字段值与字段的顶部或底部对齐，则可以使用顶部填充，而不使用底部填充，反之亦然。

框大小：边框框

那么你可以应用填充对我来说还不太合适。你能看看我的密码笔吗？在Safari中，占位符文本被很好地输入，绿色占位符也填充了输入区域。在Chrome中，占位符文本根据文本顶部垂直居中，较小的绿色区域显示。如何使两者垂直居中？就像输入的文本一样？把这篇课文写在你的问题里，而不是答案里

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

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 12px;
    text-transform: none;
}