当移动页面位于顶部时，Div垂直居中，但当我们向下滚动页面时，会发生错误

Question

我正在构建一个cordova应用程序。当我点击div，它的组件显示和弹出必须在屏幕的中心。这是我的代码。

        var new_height = $('#' + id).height() + 20;
        var new_width = $('#' + id).width() * 0.97;
        $('#' + id + '_popup').width(new_width);
        var move_up = $('#' + id + '_popup').height() / 2;
        $('#' + id + '_popup').css({
            "overflow-y": 'auto',
            'transform': 'translateY(-' + $('#' + id + '_popup').height() / 2 + 'px)'
        });
        $('#' + id + '_popup').css("z-index", '3000');

但是当我滚动页面时，新的div不是显示在div的中心，而是在上面。我该怎么办?

Answer 1

你只能通过CSS实现完美的居中，所以删除无用的计算并像这样使用transform:

.red {
  position: absolute;
  height: 100%;
  width: 100%;
  background: red;
}
.green {
  position: absolute;
  height: 40%;
  width: 40%;
  background: green;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%); /*safari iOS*/
  transform: translate(-50%, -50%);
}

<div class="red">
  <div class="green">
  </div>
</div>

与此代码无关的盒子的大小，它将始终在屏幕的中心。

可以将position更改为fixed或relative，仍然可以工作