我正在尝试创建一个简单的卡片盒页面，基于前端导师挑战(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>根据你所说的mobile的大小，你的body CSS有一个固定的min-width:min-width: 375px。因此，任何小于375px的屏幕都会溢出，并且不会根据窗口大小调整，而是根据最小宽度调整。
添加以下内容:
@media(max-width:400px){
body {
min-width: unset;
}
}