CSS Translate未生效：密码输入框眼睛图标无法居中对齐求助

问题根源在于你的.field容器固定了70px高度，但输入框只占容器的70%（49px），输入框在容器内存在上下留白；再加上字体图标默认的基线对齐特性，导致你设置的top:50%是基于整个容器高度居中，和输入框的视觉中心错位。

下面提供两种实用解决思路：

方法1：微调图标定位，匹配输入框位置 #

输入框在容器内的顶部偏移为(70px - 49px)/2 = 10.5px，输入框自身的垂直中心和容器的50%位置数值上一致，但字体图标因基线问题会视觉偏下，可通过以下两种方式修正：

修改.eye-icon的CSS：

.eye-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  /* 微调垂直偏移，抵消字体基线的影响 */
  transform: translateY(-55%);
  font-size: 18px;
  color: #8b8b8b;
  cursor: pointer;
  padding: 5px;
  /* 或者直接设置line-height等于输入框高度 */
  /* line-height: 49px; */
}

方法2：重构布局，让对齐逻辑更简洁 #

去掉容器的固定高度，改用内边距控制垂直空间，让输入框高度自适应，这样图标基于容器居中就会和输入框自然对齐：

修改相关CSS代码：

.form .field {
  position: relative;
  width: 100%;
  margin-top: 24px;
  border-radius: 3px;
  /* 移除固定高度，用padding控制上下留白 */
  padding: 8px 0;
}

.field input, .field button {
  width: 100%;
  border: none;
  font-size: 14px;
  font-weight: 400;
  border-radius: 3px;
  /* 移除固定高度，用padding定义输入框自身高度 */
  padding: 12px 15px;
}

.field input {
  outline: none;
  border: 1px solid#CACACA;
}

.eye-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #8b8b8b;
  cursor: pointer;
  padding: 5px;
}

这种方式布局更灵活，后续修改输入框高度时，图标对齐逻辑无需额外调整。

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