屏幕高度小于元素高度时，如何移除absolute定位的居中样式？

可以通过两种方式处理这个问题，分别是纯CSS媒体查询方案和JavaScript动态适配方案，具体实现如下：

方案一：纯CSS媒体查询（推荐，无需JS） #

通过媒体查询判断视口高度是否小于元素预估高度，切换定位样式并开启内部滚动，避免内容被裁切：

.wrap {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background-color: white;
    gap: 1rem;
    width: 45%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    display: flex;
    flex-direction: column;
    padding: 4rem;
    max-height: 90vh; /* 限制元素最大高度为视口的90% */
    box-sizing: border-box; /* 确保padding包含在元素高度计算内 */
}

/* 当视口高度小于元素预估总高度时，调整样式 */
@media (max-height: 400px) {
    .wrap {
        top: 0;
        transform: none;
        max-height: 100vh;
        overflow-y: auto; /* 内容超出时显示垂直滚动条 */
    }
}

注：max-height和媒体查询的max-height值可根据元素实际高度调整，box-sizing: border-box能保证padding不会额外增加元素总高度。

方案二：JavaScript动态适配（精准适配元素实际高度） #

通过监听窗口尺寸变化，动态对比视口高度与元素实际高度，添加/移除样式类：

调整后的CSS #

.wrap {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background-color: white;
    gap: 1rem;
    width: 45%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    display: flex;
    flex-direction: column;
    padding: 4rem;
    box-sizing: border-box;
}

/* 小屏幕下的适配样式 */
.wrap.small-screen {
    top: 0;
    transform: none;
    max-height: 100vh;
    overflow-y: auto;
}

JavaScript代码 #

const wrapElement = document.querySelector('.wrap');

function adjustWrapStyle() {
    const viewportHeight = window.innerHeight;
    const elementHeight = wrapElement.offsetHeight;

    if (viewportHeight < elementHeight) {
        wrapElement.classList.add('small-screen');
    } else {
        wrapElement.classList.remove('small-screen');
    }
}

// 页面加载时初始化检查
adjustWrapStyle();
// 监听窗口大小变化
window.addEventListener('resize', adjustWrapStyle);

内容的提问来源于stack exchange，提问作者Alena Chuyankova