javascript - 移动页面在顶部时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 仍然有效。