Javascript 如何定位输入和p元素，使其中心相互匹配

我希望元素#1和#2的中心相互匹配。我希望元素1和2的中心（中点）匹配。如何使用css实现这一点

 <input id="inputCustomer" tyep="text">
 <p id="spandiv">{{customerName}}</p>

{{customerName}

第一个元素是输入框，第二个元素是p元素，当我将鼠标悬停在输入元素上时会出现

---

使用

文本对齐：居中

客户名称
您可以：

将
显示为
块
，并提供
自动
让
在
中心对齐其文本，因为宽度（默认）为
100%


.wrapper>输入{
显示：块；
左边距：自动；
右边距：自动；
}
.wrapper>p{
文本对齐：居中；
}

{{customerName}
请查找下面的代码片段，这可能很有用：


ul{
列表样式：无；
填充：0；
保证金：0；
}
李{
填充：0；
保证金：0；
显示：内联块；
位置：相对位置；
}
李平{
显示：无；
位置：绝对位置；
排名：0；
左：50px
背景色：#FFF；
}
李：悬停p{
显示：块；
}


要显示的文本


您是否尝试过
边距：0自动？