如何使输入框内文本垂直居中（不设置水平居中）

你的问题根源在于两点：

• text-align: middle是无效写法，该属性仅控制水平方向的文本对齐，并没有middle这个可选值；
• 你把输入框的height和font-size设为相同的20px，但输入框默认带有边框和内边距，再加上字体的基线对齐规则，直接导致文本被挤压到右上角。

下面提供两种可行的解决方法：

方案1：用内边距替代固定高度（推荐） #

去掉固定height，通过上下内边距控制输入框整体高度，文本会自然垂直居中，同时避免边框和内边距挤占内容空间：

#textInput {
  border-radius: 5px;
  border: 1px solid grey; /* 简化border属性的写法 */
  padding: 3px 6px; /* 上下内边距控制高度，左右内边距优化水平留白 */
  width: 210px;
  position: absolute;
  font-family: MathGG;
  font-size: 20px;
}

方案2：保留固定高度的调整方式 #

如果必须固定输入框高度，需要配合box-sizing和line-height做适配：

#textInput {
  border-radius: 5px;
  border: 1px solid grey;
  height: 20px;
  width: 210px;
  position: absolute;
  font-family: MathGG;
  font-size: 20px;
  box-sizing: border-box; /* 让height包含边框和内边距，避免总高度超出设置值 */
  line-height: 18px; /* 减去上下边框总宽度（1px*2），让行高匹配容器可用高度 */
  padding: 0 4px; /* 仅设置左右内边距，不影响垂直居中 */
}

内容的提问来源于stack exchange，提问作者Allen