如何实现主div垂直居中？前端入门响应式卡片布局问题求助

修复方案 #

核心问题根因

1. HTML缺失移动端适配必需的viewport元标签，导致小屏幕渲染逻辑异常
2. body设置了min-width:375px，屏幕宽度小于375px时会出现横向滚动条，拖拽时卡片偏移
3. 未设置图片全局样式，卡片内图片可能溢出容器
4. 移动端视口高度用100vh会被浏览器状态栏/工具栏占据空间，导致垂直居中偏移

完整修改后代码

CSS代码

@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap");

:root {
    --pale-blue: hsl(225, 100%, 94%);
    --bright-blue: hsl(245, 75%, 52%);
    --very-pale-blue: hsl(225, 100%, 98%);
    --desaturated-blue: hsl(224, 23%, 55%);
    --dark-blue: hsl(223, 47%, 23%);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 新增图片全局样式 */
img {
    max-width: 100%;
    display: block;
}

body {
    display: grid;
    place-items: center;
    background-image: url(/assets/images/pattern-background-desktop.svg);
    background-repeat: repeat-x;
    background-color: var(--pale-blue);
    font-family: "Red Hat Display", sans-serif;
    font-size: 16px;
    /* 移除min-width:375px，添加padding避免卡片贴边 */
    padding: 1rem;
    /* 替换100vh为100dvh适配移动端视口 */
    min-height: 100dvh;
}

/* ----------Card---------- */
.card {
    /* 新增width:100%配合max-width实现自适应 */
    width: 100%;
    max-width: 450px;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 18px 25px -12px rgba(0,0,0,0.64);
}

/* ----------Mobile Responsiveness---------- */
/* 原有媒体查询逻辑已无需使用，可直接删除 */

HTML代码（仅补充head部分缺失的viewport标签）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 必需添加的移动端适配视口标签 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Order Summary Card</title>
</head>

<body>
  <div class="card">
    <div class="card-img"><img src="/assets/images/illustration-hero.svg" alt=""></div>

    <div class="summary-info">
      <h4>
        Order Summary
      </h4>
      <p>
        You can now listen to millions of songs, audiobooks, and podcasts on any
        device anywhere you like!
      </p>
    </div>

    <div class="plan-box-all">
      <div class="plan-box-inner fit-pb">
        <div class="plan-icon">
          <img src="/assets/images/icon-music.svg" alt="music note beside price info">
        </div>
        <div class="plan-price fit-pb">
          <h4>Annual Plan</h4>
          <p>$59.99/year</p>
        </div>
        <div class="plan-changer fit-pb">
          <a href="#">Change</a>
        </div>
      </div>
    </div>

    <div class="btns">
      <a href="#" class="pay-btn">Proceed to Payment</a>
      <a href="#" class="cancel-btn">Cancel Order</a>
    </div>
  </div>

</body>

</html>

改动说明

• 补充viewport标签：强制移动端按设备实际宽度渲染页面，是响应式适配的基础配置
• 移除body的min-width:375px：解决小屏幕下出现横向滚动条、拖拽页面卡片偏移的问题
• 替换min-height:100vh为min-height:100dvh：适配移动端动态视口高度，避免浏览器上下栏占据空间导致卡片垂直居中偏移
• 新增图片全局样式：避免卡片内图片溢出容器，同时消除图片默认的底部行高间距
• 卡片添加width:100%：配合原有max-width:450px实现自适应，大屏幕下最大宽度为450px，小屏幕下自动适配可用宽度，无需额外媒体查询设置宽度
• 给body添加padding:1rem：保证所有尺寸下卡片都不会贴到屏幕边缘，视觉效果更协调

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