.input-icon{ position: absolute; top: 50%; } 怎么实现上下居中

`.input-icon` 的样式通过 `position: absolute; top: 50%;` 实现了元素的垂直居中对齐。当这个类应用于某个绝对定位的元素时，它会将该元素放置在其包含块（通常是指其直接父元素）的中心位置。这里的 `top: 50%` 表示元素上边缘距离其父元素上边缘50%的距离，这就使得元素的顶部恰好处于垂直居中状态。

要让输入框或者其他内容也随着`.input-icon`一起居中，你需要确保`.input-icon`的宽度与之匹配，并为其添加额外的样式，例如：

.input-container {
  display: flex;
  align-items: center; /* 这里设置整个容器水平和垂直居中 */
}

.input-element {
  margin-left: -50%; /* 使用负边距来抵消`.input-icon`高度的一半，使其保持对齐 */
}

在这个例子中，`.input-container` 设置为了 `display: flex` 并且设置了 `align-items: center` 来保证 `.input-element` 和 `.input-icon` 都垂直居中。`.input-element` 则需要一个负的左边距来补偿 `.input-icon` 的高度，这样才能保持整体的对齐效果。

相关问题

在input中右边加上一个图标的css样式

可以使用CSS中的伪元素 ::after 或者 ::before 来实现在input右侧添加图标的效果。例如：

input::after {
  content: url(icon.png);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

这个样式会在input的右侧添加一个名为icon.png的图片。其中，position: absolute; right: 10px; 表示将图标放在input的右侧，距离input的右侧边缘为10px。top: 50%; transform: translateY(-50%); 表示将图标垂直居中对齐。需要注意的是，如果input设置了padding，需要将right的值减去相应的padding值才能达到预期的效果。