Html 使用填充和垂直对齐在输入中添加货币

我需要一个里面有欧元或美元货币的输入。我有一个填充了的输入（没有填充我没有问题）

我怎样才能做到完美的垂直居中

我尝试了这种方法，但没有达到最佳效果：

1） “页边距顶部：自动”和“页边距底部：自动”方法：

div{position:relative}
输入{padding:1em}
.货币{
位置：绝对位置；
右：0.4em；
身高：50%；
排名：0；
底部：0；
页边顶部：自动；
页边距底部：自动
}
€

2） 固定高度和边距顶部负片：

div {position:relative}

input {padding: 1em}

.currency {
  position:absolute;
  right:0.4em;
  height:3em;
  top:50%;
  margin-top:-1.5em;
 }

<div>
 <input type="text">
 <span class="currency">€</span>
</div>

div{position:relative}
输入{padding:1em}
.货币{
位置：绝对位置；
右：0.4em；
高度：3em；
最高：50%；
边缘顶部：-1.5em；
}
€

在这两种情况下，垂直对齐都不能完美地工作

---

有什么想法吗？

你可以使用

位置：绝对
和
变换：translateY（-50%）


div{
位置：相对位置；
显示：内联块；
}
输入{
填料：1.2米；
文本对齐：右对齐；
}
.货币{
位置：绝对位置；
右：5px；
最高：50%；
转化：translateY（-50%）；
}

€
在本例中，输入没有填充
div {position:relative}

input {padding: 1em}

.currency {
  position:absolute;
  right:0.4em;
  height:3em;
  top:50%;
  margin-top:-1.5em;
 }

<div>
 <input type="text">
 <span class="currency">€</span>
</div>