【CSS】chrome input[type=text]标签内placeholder字体偏下，不垂直居中

最近在开发项目时发现，在移动端input里面的placeholder字体偏下，但PC端却是垂直居中，而两者的代码几乎相同，只是字体大小有差异，查询发现原来就是它惹的祸。

原因：

输入的文字font-size大于placeholder的font-size。
当时我的代码中PC端与移动端的font-size均为默认值：16px，而PC端的placeholder的font-size为18px，移动端的placeholder的font-size为12px。

解决办法：

① 利用css选择器:placeholder-shown，该选择器会匹配当前无输入值的输入框（但必须设置placeholder），当输入框没有输入值时，我们可以把输入框的字体大小调整至小于或等于placeholder字体大小的状态，这样就解决字体偏下的问题啦。

示例代码：

:placeholder-shown{
  font-size:12px;
}

② 当然也可以直接在::placeholder伪元素中使用translateY调整文字上下位置。

&::placeholder{
  transform: translateY(-5px);
}