Chrome浏览器中如何垂直居中不同字号的Input占位符？

架构老林

2026-8-6

Chrome中Input占位符（与输入框字体大小不同）垂直居中解决方案

当输入框和占位符字体大小不同时，Chrome会基于基线对齐占位符，导致视觉上偏下，而Firefox、Safari默认是垂直居中。以下是几个可靠的解决方法：

方法1：统一行高+垂直对齐

给输入框和占位符设置相同的line-height，再给占位符指定vertical-align: middle，强制Chrome按垂直居中对齐：

.input {
    font-size: 14px;
    line-height: 24px; /* 根据需求设置合适的行高，控制输入框高度 */
}

.input::placeholder {
    font-size: 8px;
    text-align: left;
    color: green;
    line-height: 24px; /* 和输入框行高保持一致 */
    vertical-align: middle;
}

这个方法最稳定，不会引入额外的布局问题，多浏览器兼容性最好。

方法2：内边距配合行高重置

如果需要更精细的高度控制，用上下内边距定义输入框高度，同时把占位符的line-height设为1，再加上vertical-align: middle：

.input {
    font-size: 14px;
    padding: 8px 0; /* 上下内边距控制输入框高度 */
    box-sizing: border-box; /* 确保内边距不会撑大输入框 */
}

.input::placeholder {
    font-size: 8px;
    text-align: left;
    color: green;
    line-height: 1;
    vertical-align: middle;
}

方法3：动态计算transform偏移（优化版）

如果之前的transform方案效果差，可以用calc动态计算偏移量，只针对Chrome做调整，不影响其他浏览器：

.input::placeholder {
    font-size: 8px;
    text-align: left;
    color: green;
    /* 偏移量计算公式：(输入框字体大小 - 占位符字体大小)/2 的负值 */
    -webkit-transform: translateY(calc((14px - 8px)/-2));
    transform: translateY(calc((14px - 8px)/-2));
}

这个方式是动态适配字体大小差异的，只要修改calc里的数值就能对应不同的字体大小组合。