如何垂直居中对齐我的主 div？答案

【问题标题】：How do I vertically center align my main div?如何垂直居中对齐我的主 div？
【发布时间】：2021-12-11 04:29:55
【问题描述】：

我正在尝试基于前端导师挑战 (https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj) 创建一个简单的卡片盒页面，但我真的很难垂直对齐主卡片。

我希望它能够响应较小的屏幕尺寸（移动设备），但正如您在演示页面中看到的那样，如果用户抓住页面，卡片会四处移动。我希望它是静态的，并且卡片 - 以及它的元素 - 适应（缩小或扩展）不同的屏幕尺寸。

这是我的第一个 CSS 实验，所以我不知道该怎么做。

演示页面：https://card-style-test.w3spaces.com/

@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;
}

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;
    min-height: 100vh;
}

/* ----------Card---------- */
.card {
    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---------- */
@media screen and (max-width: 500px) {
    .card {
        width: 90%;
        margin: auto auto;
    }
}

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

<head>
</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>

【问题讨论】：

请确保您的代码是minimal reproducible example。

标签： html css vertical-alignment

【解决方案1】：

根据您称为 mobile 的尺寸，您的 body CSS 有一个固定的最小宽度：min-width: 375px。所以任何小于 375px 的屏幕都会溢出，不会调整到窗口大小，而是调整到最小宽度。

添加以下内容：

@media(max-width:400px){
  body {
    min-width: unset;
  }
}

【讨论】：