当虚拟键盘可见时，页面中心的 CSS 元素被推高

Question

我对位于页面中心的 div 有以下样式

<div class="myStyle">Hi All...</div>

CSS 代码:

<style>
.myStyle {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

当虚拟键盘打开时，div 被向上推。我不明白为什么。有什么建议吗？

Answer 1

这是因为您的视口(viewport)(或元素最近的 relative 定位父级)正在垂直收缩。如果您不希望它移动，则必须确保具有 relative 位置的最近父级具有固定高度。

这是一个例子，第二个 div 将根据窗口的高度移动(打开开发工具的片段全屏)

.row {
  width: 100vw;
}
.col {
  width: 50%;
  float: left;
  position: relative;
  background: #eee;
}

.col > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  background: #0095ee;
  color: #fff;
}

<div class="row">
  <div class="col" style="height: 200px;"><div>My Y center is always 100px;</div></div>
  <div class="col" style="height: 100vh;"><div>My Y xenter varies with Devtools/etc.</div></div>
</div>