當移動頁位於頂部時，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的中心，而是顯示在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 ，但仍然可以使用。