励志海报网站布局问题排查及CSS Margin修复咨询

效果对比 #

• 目标海报
  
• 当前实现的海报
  

项目要求 #

创建一个励志海报网站，可自由设计样式，参考目标图片获取灵感，但必须具备以下特性：

1. 主h1文本需使用Google Fonts中的Regular Libre Baskerville字体
2. 文本为白色，背景为黑色
3. 将自定义图片放入assets下的images文件夹，图片需带有5px白色边框
4. 文本需居中对齐
5. 创建一个div包含h1、p和image元素，调整margin使图片和文本在页面居中。提示：给div设置width为50%，margin-left为25%可实现水平居中；设置图片width为100%以填满div
6. 用CSS将h1转为大写

当前代码 #

HTML代码 #

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
            rel="stylesheet"
        />
    </head>

    <body>
        <div id="box1">
            <!-- <img src="max-harlynking-UdCNVHNgHdI-unsplash.jpg" alt="" width="100%" height="50%" /> -->
            <img src="https://picsum.photos/640/480" alt="" width="100%" height="50%" />

            <h1 id="texts">let's a go!!!</h1>
            <p id="texts">we did it</p>
        </div>
    </body>
</html>

CSS代码 #

h1 {
    color: white;
    font-family: 'Libre Baskerville', cursive;
}

p {
    color: white
}

body {
    background: black;
}


#texts {
    text-transform: uppercase;
}


#box1 {
    border: 5px solid;
    text-align: center;
    color: white;
    width: 450px;
    height: 500px;
    padding-top: 50px;
}


div {
    width: 50%;
    height: 100%;
    margin-left: 25%;
    margin-top: 25%;
}

当前问题 #

页面缩小时图片占半屏显示正常，但全屏时内容居中却位于页面底部。作为前端入门者，仅掌握基础HTML和CSS知识，希望排查代码错误并了解更简便的实现方式。

问题排查与优化方案 #

1. 核心错误分析 #

• 重复ID冲突：h1和p共用id="texts"，HTML中ID必须唯一，会导致样式应用混乱（比如text-transform可能只作用于第一个元素）
• 全局div样式叠加：给所有div设置width:50%和margin-top:25%，而#box1本身就是div，相当于给容器套了两层布局规则，全屏时margin-top:25%基于页面高度计算，直接把内容推到底部
• 固定尺寸限制：#box1设置固定宽高450px/500px，无法适配不同屏幕，不符合项目要求的自适应宽度
• 边框位置错误：给容器加了边框，不是给图片加，不符合项目要求

2. 修正后的代码 #

HTML代码（调整结构与选择器）

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet" />
</head>
<body>
    <div class="poster-container">
        <img src="https://picsum.photos/640/480" alt="励志海报图片" />
        <h1 class="poster-title">let's a go!!!</h1>
        <p class="poster-subtitle">we did it</p>
    </div>
</body>
</html>

CSS代码（简化并符合要求）

/* 全局重置：消除浏览器默认边距，避免布局干扰 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
    min-height: 100vh; /* 让body占满整个视口高度 */
    display: flex; /* 用flex快速实现垂直+水平居中 */
    align-items: center;
    justify-content: center;
}

.poster-container {
    width: 50%; /* 符合项目要求的自适应宽度 */
    text-align: center; /* 文本居中对齐 */
}

.poster-container img {
    width: 100%; /* 图片填满容器 */
    border: 5px solid white; /* 给图片加白色边框 */
}

.poster-title {
    color: white;
    font-family: 'Libre Baskerville', serif; /* 字体用衬线体，贴合字体本身风格 */
    text-transform: uppercase; /* 转为大写 */
    margin: 20px 0 10px; /* 增加文本与图片的间距 */
}

.poster-subtitle {
    color: white;
    font-family: 'Libre Baskerville', serif;
}

3. 优化说明 #

• Flex布局居中：给body设置min-height:100vh和flex布局，比用margin更可靠，能适配所有屏幕尺寸的垂直水平居中
• 类选择器代替ID：避免重复ID问题，也更利于后续样式复用
• 正确设置图片边框：直接给img元素加边框，完全符合项目要求
• 字体修正：Libre Baskerville是衬线字体，用serif代替cursive（手写体），还原字体原本风格
• 全局样式重置：消除浏览器默认的margin和padding，避免不必要的布局偏差

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