Question

当用户点击搜索图标时，我需要将搜索字段显示为叠加层。在我的情况下，叠加正在工作，但搜索输入字段在垂直中间显示。

<a href="#overlay" id="open-overlay">Search</a>

<div id="overlay"> <a href="#" class="close">X</a>
    <div class="s-wrapper"><input value="" placeholder="Search"/></div>
</div>

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

Answer 1

使用以下作品：

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

检查http://jsfiddle.net/h668zsnL/

Answer 2

查看this page。

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

Answer 3

你可以这样做，

CSS，

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

检查Demo

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

3 个答案: