Flask音乐应用模板内容超出可视区域且无法居中如何解决

问题根源 #

你的内容无法正常在可视区居中显示有两个核心原因：

1. 布局结构错误：{% block content %} 放在了占满整个视口高度（100vh）的 animation-area 容器外部，内容默认被挤到了渐变背景的下方，超出了当前可视区域
2. 缺少层级和居中规则：动画元素 .box-area 是绝对定位，层级比普通流的内容高，就算内容移入背景区也会被盖住，同时没有给内容区块设置居中规则

修改方案 #

1. 调整layout.html结构

把内容区块移到 animation-area 内部，让内容渲染在渐变背景之上：

<body> 
    <header>
        <div class="banner-text">
            <a href="/" class=logo>SPOTS</a>
            <ul>
                <li>Home</li>
                <li href='about.html'>About</li>
            </ul>
        </div>
    </header>
    <div class="animation-area">
        <ul class="box-area">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- 内容区块移到此处 -->
        {% block content %}{% endblock %}
    </div>
</body>

2. 修改style.css补充样式

新增内容区块的层级、居中规则，调整原有h2样式：

/* 新增内容区块样式 */
.content-section {
    position: relative;
    z-index: 10; /* 层级高于动画元素，避免被盖住 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中，若不需要完全垂直居中可删除此行，替换为padding-top调整和顶部的距离 */
    height: calc(100vh - 70px); /* 减去header的实际高度，避免内容被顶部导航挡住 */
}

/* 新增按钮边距 */
.content-section .btn {
    margin-top: 25px;
}

/* 修改原有h2样式，删除多余的margin-top */
.content-section h2{
    text-align: center;
    color: #fff;
    font-size: 50px;
}

/* 原有其他样式保留不变 */
.animation-area {
    background: linear-gradient(to left, #8942a8, #ba382f);
    width: 100%;
    height: 100vh;
}
.box-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

修改完成后刷新页面即可看到标题和按钮在渐变背景区域内居中显示。

内容的提问来源于stack exchange，提问作者Glen Veigas