position:absolute居中div高度超视口无法滚动到顶部如何修复

问题原因 #

你使用的position: absolute + top: 50% + transform: translate(-50%, -50%)的居中方案存在固有缺陷：当.main元素的高度超过视口高度时，top: 50%会先把元素的顶部锚定在视口垂直中线位置，再通过transform上移自身高度的一半，此时如果元素高度大于视口，顶部就会溢出到视口上方，浏览器默认滚动无法覆盖这部分溢出区域，就会出现无法滚动到顶部的问题。

修复方案 #

方案1：使用Flex布局实现居中（推荐） #

Flex是目前最稳定的居中方案，完美兼容所有现代浏览器，不会出现滚动异常问题，修改后的CSS如下：

html {
    min-height: 100%; /* 把固定高度改成最小高度，允许内容撑开页面 */
}

body {
    width: 100%;
    min-height: 100vh; /* 最小高度撑满视口，内容多的时候自动撑开 */
    margin: 0;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 1rem 0; /* 上下留内边距，避免小屏内容贴边被裁切 */
    box-sizing: border-box;
}

.main {
    /* 删除原来的position、top、left、transform相关属性 */
    text-align: center;
    border: .5rem solid red;
    word-wrap: break-word;
    padding: 1rem;
    width: 50%;
    box-sizing: border-box;
}

h1 {
    margin: 0 0 0 1rem;
}

该方案下，内容高度小于视口时会自动居中，内容高度超过视口时页面会正常生成滚动条，完整展示所有内容。

方案2：保留绝对定位的修改方案 #

如果必须使用绝对定位布局，可以修改为margin自动适配的绝对定位居中，同时限制最大高度避免溢出：

.main {
    position: absolute;
    /* 新增以下属性，删除原来的top:50%、left:50%、transform属性 */
    inset: 0; /* 等价于top:0; right:0; bottom:0; left:0 */
    margin: auto;
    max-height: calc(100vh - 2rem); /* 最大高度限制为视口高度减去上下边距 */
    overflow-y: auto; /* 内容超出时内部出现滚动条 */
    /* 原有其他属性保留 */
    text-align: center;
    border: .5rem solid red;
    word-wrap: break-word;
    padding: 1rem;
    width: 50%;
    box-sizing: border-box;
}

该方案下内容超出时滚动条会出现在.main容器内部，也可以正常访问所有内容。

两种方案对静态内容和JS动态生成的内容都有效，不需要额外调整JS逻辑。

内容的提问来源于stack exchange，提问作者Peter Ambos