HTML/CSS图片画廊布局求助：无法居中且添加图片遇阻

问题分析 #

你的代码存在两个核心问题：

1. HTML结构错误：header内的.wrapper标签闭合顺序错误，画廊<section>里有多余的</div>标签，导致DOM结构混乱，样式无法正常生效。
2. CSS布局逻辑问题：定义的.gallery-container未在HTML中使用，且header设置了height:100vh，加上不合理的padding-top会导致画廊位置偏移，无法实现预期的居中效果。

修正后的代码 #

HTML代码（修复结构错误）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anniversary Homepage</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="saloucss.css">    
</head>
<body>
    <header>
        <div class="wrapper">
            <ul class="nav-area">
                <li><a href="index.html">Home</a></li>
                <li><a href="salou.html">Salou</a></li>
                <li><a href="summer24.html">Summer 24</a></li>
                <li><a href="every.html">Everything Else</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </header>

    <section class="gallery-container">
        <div class="gallery">
            <div class="gallery-item">
                <img src="images/clarebg.jpg" alt="Image 1">
            </div>
            <div class="gallery-item">
                <img src="images/clarebg.jpg" alt="Image 2">
            </div>
            <div class="gallery-item">
                <img src="images/clarebg.jpg" alt="Image 3">
            </div>
            <div class="gallery-item">
                <img src="images/clarebg.jpg" alt="Image 4">
            </div>
            <div class="gallery-item">
                <img src="images/clarebg.jpg" alt="Image 5">
            </div>
            <!-- 在这里继续添加更多.gallery-item即可扩展画廊 -->
        </div>
    </section>
 </body>
</html>

CSS代码（优化布局逻辑）

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 统一盒模型，避免padding影响宽度 */
}
body {
    font-family: 'Poppins', sans-serif;
}
.wrapper {
    width: 1170px;
    margin: auto;
}
header {
    background: url('images/clarebg.jpg');
    height: 100vh;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.nav-area {
    float: right;
    list-style: none;
    margin-top: 30px;
}
.nav-area li {
    display: inline-block;
}
.nav-area li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 20px;
    font-size: 16px;
    text-transform: uppercase;
}
.nav-area li a:hover {
    background: #fff;
    color: #333;
}

.gallery-container {
    padding: 40px 20px; /* 上下留白，避免贴边 */
    display: flex;
    justify-content: center; /* 水平居中 */
    min-height: calc(100vh - 100vh); /* 适配header高度，避免被遮挡 */
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1200px; /* 限制最大宽度，避免大屏下图片过宽 */
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

关键优化点 #

1. 修复DOM结构：修正了header内的标签嵌套错误，移除了画廊中多余的闭合标签，确保结构合法。
2. 启用gallery-container：用它包裹画廊，通过Flex实现水平居中，同时设置合理的内边距避免内容贴边。
3. 适配header高度：通过min-height: calc(100vh - 100vh)确保画廊在header下方正常显示，也可根据需求调整这个值来控制上下间距。
4. 增强扩展性：网格布局repeat(auto-fill, minmax(250px, 1fr))会自动根据容器宽度调整列数，直接添加新的.gallery-item即可扩展画廊，无需修改CSS。

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