本文详解如何通过 CSS 的绝对定位与 transform 配合，将眼睛图标精准垂直居中于密码输入框内部，重点解决因父容器缺少 position: relative 导致 top: 50% 和 transform: translateY(-50%) 失效的问题。
本文详解如何通过 css 的绝对定位与 `transform` 配合，将眼睛图标精准垂直居中于密码输入框内部，重点解决因父容器缺少 `position: relative` 导致 `top: 50%` 和 `transform: translatey(-50%)` 失效的问题。
要使 .eye-icon（如眼睛图标）在 内部实现垂直居中对齐，关键在于 CSS 定位上下文的建立。你当前的代码中，.eye-icon 使用了：
.eye-icon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}这段逻辑本身是正确的——它利用「相对自身高度 50% 偏移 + 向上回拉一半」的方式实现垂直居中。但其生效的前提是：该元素的最近一个具有 position: relative（或 absolute/fixed）的祖先元素，必须是包裹输入框与图标的共同父容器。
而你的 HTML 结构为：
<div class="field input-field"> <label>Password</label> <input type="password" class="form-control" /> <i class="bx bx-hide eye-icon"></i> </div>
此时，.eye-icon 的定位参考系并非 .field 或 .input-field，而是浏览器视口（或更近的已定位祖先），因为 .field 和 .input-field 均未显式声明 position 属性（默认为 static，无法作为 absolute 元素的定位上下文）。
立即学习“前端免费学习笔记（深入）”；
✅ 正确解法：为 .input-field（即图标与输入框的直接父容器）添加 position: relative：
.input-field {
position: relative; /* ✅ 关键修复：创建定位上下文 */
}同时，建议微调 .field input 的样式以确保视觉一致性（例如避免边框遮挡图标）：
.field input {
outline: none;
padding: 0 15px 0 45px; /* 左侧留白，避免文字与图标重叠（可选） */
border: 1px solid #CACACA;
box-sizing: border-box; /* 确保 padding 不影响 width: 100% */
}
.eye-icon {
position: absolute;
top: 50%;
right: 12px; /* 微调水平位置，避开边框 */
transform: translateY(-50%);
font-size: 18px;
color: #8b8b8b;
cursor: pointer;
z-index: 2; /* 确保图标显示在 input 之上 */
}⚠️ 注意事项：
- 不要给 .field 或 .input-field 设置 height（除非必要），否则可能挤压内容；当前 .field 已设 height: 70px，需确保内部元素（input + icon）总高度不超过该值；
- 若使用 box-sizing: border-box，padding 和 border 将被包含在 width/height 内，布局更可控；
- 图标点击区域较小，可增加 padding 或用伪元素扩展现有点击热区（如 ::before 设置透明大区域）；
- 在响应式场景下，建议配合 @media 调整 right 和 font-size，保证小屏下仍清晰可点。
✅ 最终效果：眼睛图标将严格沿输入框高度中线垂直居中，并随输入框尺寸变化自动适配——这是现代表单控件（如密码可见切换）的标准实现模式。
