使用jquery垂直居中時，如何解決內容頂部和底部被截斷的問題？

Question

我正在制作一個簡單的登錄頁面，並且正在使用jquery在屏幕上垂直居中放置內容。 我選擇jquery是因為容器的高度是不確定的。

該腳本可以正常工作，除非屏幕的寬度非常窄（例如手機），頂部和底部被切除並且無法滾動到頂部和底部。 我創建了一個小提琴來顯示我遇到的問題。 如果將寬度設置得很窄，則可以看到內容丟失了。

有一個簡單的解決方案嗎？

謝謝

小提琴

    $(window).resize(adjustLayout);
/* call function in ready handler*/
$(document).ready(function(){
adjustLayout();
/* your other page load code here*/
})

function adjustLayout(){
$('.main').css({
    position:'absolute',
    left: ($(window).width() - $('.main').outerWidth())/2,
    top: ($(window).height() - $('.main').outerHeight())/2
});

}

Answer 1

檢查負值。

function adjustLayout(){
        var subheight=($(window).height() - $('.main').outerHeight())/2;
        $('.main').css({
            position:'absolute',
            left: ($(window).width() - $('.main').outerWidth())/2,
            top: (subheight>=0)?subheight:0,
            bottom: (subheight>=0)?subheight:0,
        });

    }

並處理溢出：

 <div class="main" style="margin: 10px; padding: 10px; max-width: 800px; text-align: center;overflow:auto;">