使用jquery垂直居中时，如何修复内容的顶部和底部被切断？

我正在制作一个简单的登录页，并使用jquery垂直居中显示屏幕上的内容。我选择jquery是因为容器的高度没有定义

脚本工作正常，除非屏幕宽度非常窄（如手机），顶部和底部被切断，无法滚动到顶部和底部。我制作了一把小提琴来显示我的问题。如果将宽度设置得非常窄，则可以看到内容丢失

有没有简单的解决办法

谢谢

---

检查是否存在负值

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;">

您是否尝试过任何只使用css的方式来集中内容？有多种方法，使用媒体查询可以使其在移动设备上的行为有所不同，如果需要的话。我认为在不使用任何javascript/jQuery的情况下，您有更好的选择垂直集中内容。以下是您可以使用的6种方法：

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