本文详解如何通过合理设置 CSS 定位与变换，将 eye-icon 精准垂直居中于 password 输入框内部，核心在于确保绝对定位元素的父容器具有 position: relative。
本文详解如何通过合理设置 css 定位与变换，将 eye-icon 精准垂直居中于 password 输入框内部，核心在于确保绝对定位元素的父容器具有 `position: relative`。
在表单设计中，将“显示/隐藏密码”图标（如 ）严格垂直居中于 内部，是提升用户体验的关键细节。但常见误区是：仅对图标设置 top: 50%; transform: translateY(-50%);，却忽略了其定位上下文（containing block）的缺失。
你的原始代码中，.eye-icon 使用了 position: absolute、top: 50% 和 transform: translateY(-50%)，这组声明本身逻辑正确——它能实现垂直居中。但问题根源在于：绝对定位元素会相对于最近的、具有 position: relative/absolute/fixed/sticky 的祖先元素进行定位；若找不到，则回退到初始包含块（通常是 viewport）。
在你的 HTML 结构中：
<div class="field input-field"> <label>...</label> <input ...> <i class="bx bx-hide eye-icon" id="toggle-password"></i> </div>
.eye-icon 的直接父元素是 .input-field（即 .field.input-field），而该元素未显式声明 position 属性，因此默认为 static —— 无法作为绝对定位的参考容器。结果导致图标脱离输入框，按整个页面顶部 50% 定位，而非输入框内部。
立即学习“前端免费学习笔记（深入）”；
✅ 正确解法：为 .input-field（即图标的直接父容器）添加 position: relative：
.input-field {
position: relative; /* 关键！创建新的定位上下文 */
}同时，保持你已有的 .eye-icon 样式不变（它已具备垂直居中能力）：
.eye-icon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%); /* 将自身向上偏移自身高度的一半 */
font-size: 18px;
color: #8b8b8b;
cursor: pointer;
padding: 5px;
}? 补充建议（增强健壮性）：
- 若 .field 类已广泛复用，可直接在 .field 上统一添加 position: relative（因其已是 .eye-icon 的祖先）；
- 为防止图标被输入框 border-radius 截断，可微调 right 值或为 .eye-icon 添加 z-index: 2；
- 推荐使用 em 或 rem 替代 px 设置 right 和 padding，以提升缩放兼容性。
✅ 最终验证效果：图标将严格沿输入框内容区域（非整个 .field 高度）的垂直中心线对齐，无论输入框 height 或 padding 如何变化，只要父容器 position: relative 生效，transform: translateY(-50%) 即可稳定生效。
总结：CSS 绝对定位的“锚点”依赖显式定位上下文。忘记给父容器设 position: relative，是图标错位最常见也最容易被忽略的根本原因。
