HTML/CSS新手求助：页面顶部出现大量空白的问题排查

核心问题分析 #

• transform参数错误：你的.container使用了transform: translate(-50%,50%);，第二个值50%会让容器在垂直方向额外向下偏移自身高度的50%，结合top:50%的视口垂直居中定位，最终导致容器整体偏移到视口下半部分，顶部出现大片空白。
• HTML标签错误：代码中使用了<image>标签，HTML标准中正确的图片标签是<img>，这个错误会导致图片无法正常显示。
• 可选优化：body默认没有占满视口高度，虽然不影响当前绝对定位的容器，但添加min-height: 100vh可以避免后续布局出现潜在问题。

修正后的代码片段 #

CSS修正部分

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

:root {
    font-size: 15px;
}

/*Card Styles*/
body {
   position: relative; 
   background-color:  hsl(0, 0%, 95%);
   min-height: 100vh; /* 确保body占满视口高度 */
}

.container {
    width: 58%;
    max-width: 550px;
    display: grid;
    grid-template-columns: 1fr;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 修正垂直偏移参数 */
}

main > div {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.9em;
}

.sedans {
    background-color: hsl(31, 77%, 52%);
}
.SUVS {
    background-color: hsl(184, 100%, 22%);
}
.luxury {
    background-color: hsl(179, 100%, 13%);
}

p {
    color: hsla(0, 0%, 100%, 0.75);
   line-height: 1.5;
}

h1 {
    color:  hsl(0, 0%, 95%);
    text-transform: uppercase;
}

button {
    display: inline-block;
    background-color:  hsl(0, 0%, 95%);
    padding: 0.7em;
    cursor: pointer;
    border-radius: 20px;
    border: none;
    outline: none;
    width: 110px;
}

HTML修正部分（仅图片标签）

<div><img src="images/icon-sedans.svg" alt="Sedans icon"></div>
<div><img src="images/icon-suvs.svg" alt="SUVs icon"></div>
<div><img src="images/icon-luxury.svg" alt="Luxury icon"></div>

内容的提问来源于stack exchange，提问作者Adebimpe Abdulhamid Eniola