Html 在叠加中，将输入字段垂直/水平居中对齐

当用户单击搜索图标时，我需要将搜索字段显示为覆盖。在我的例子中，覆盖正在工作，但搜索输入字段垂直显示在中间

---

此覆盖基于纯css解决方案，因为在这种情况下我无法使用基于脚本的覆盖。

请使用以下作品：

.s-wrapper{
    top: 50%;
    transform: translateY(-50%);
}

---

选中

为您使用以下作品：

.s-wrapper{
    top: 50%;
    transform: translateY(-50%);
}

查看一下

看一看

你可以这样做

CSS

选中你可以这样做

CSS

---

选中

是否要将输入置于垂直中心？是否要将输入置于垂直中心？

.s-wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.s-wrapper{
  height: 500px;
  display: table-cell;
  width: 500px;
  vertical-align: middle;
  text-align: center;
}