我是 html 和 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%);
}
.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;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css">
<title>Frontend Mentor | 3-column preview card component</title>
</head>
<body>
<main class="container">
<div class="sedans">
<div><image src="images/icon-sedans.svg" alt=""></div>
<h1>Sedans</h1>
<p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
or on your next road trip.</p>
<button>Learn more</button>
</div>
<div class="SUVS">
<div><image src="images/icon-suvs.svg" alt=""></div>
<h1>SUVs</h1>
<p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
and off-road adventures.</p>
<button>Learn more</button>
</div>
<div class="luxury">
<div><image src="images/icon-luxury.svg" alt=""></div>
<h1>Luxury</h1>
<p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
rental and arrive in style.</p>
<button>Learn more</button>
</div>
</main>
</body>
</html>通过检查工具（右键/F12 -> 元素选项卡），您可以检查每个元素覆盖的范围。 然后您可以知道具有“容器”类的元素从顶部已经有空间。 下一步，检查该类附加的类/样式，你会发现制作空间的样式是
transform: translate(-50%,50%);
您只需修改该值即可查看导致问题的值，然后更改该值以满足您的要求。
/*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%);
}
.container {
width: 58%;
max-width: 550px;
height: 100%; /* Here i adjusted the container height to 100% */
margin-top: 10px;
/* Margin-top so the top and bottom gets space and looks good */
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;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css">
<title>Frontend Mentor | 3-column preview card component</title>
</head>
<body>
<main class="container">
<div class="sedans">
<div><image src="images/icon-sedans.svg" alt=""></div>
<h1>Sedans</h1>
<p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
or on your next road trip.</p>
<button>Learn more</button>
</div>
<div class="SUVS">
<div><image src="images/icon-suvs.svg" alt=""></div>
<h1>SUVs</h1>
<p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
and off-road adventures.</p>
<button>Learn more</button>
</div>
<div class="luxury">
<div><image src="images/icon-luxury.svg" alt=""></div>
<h1>Luxury</h1>
<p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
rental and arrive in style.</p>
<button>Learn more</button>
</div>
</main>
</body>
</html>