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，但仍可以使用。

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

1 个答案: