<body>
<div class="card">
<div class="imgBox">
<img src="" alt="">
</div>
<h2>Hello</h2>
</div>
</body>
</html>
这是我的HTML
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: flex-start;
background-color: aquamarine;
}
.card{
width: 350px;
height: 400px;
background-color: red;
}
.card .imgBox{
width: 40px;
height: 40px;
background-color: blue;
}
我是CSS的初学者，试图弄清楚flexbox是如何工作的?当我尝试使用align-items: center;来居中红色盒子时，盒子不会改变它的位置。
align -items仅在父项有高度时起作用。
如果您将height: 100vh设置为body，它将工作。
你也可以通过添加一些内容来改变这种行为。
你也可以检查这个:https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element
我建议您使用vh和vw。
看起来像:
h1 {
font-size: 20vh;
}
有关vh和vw的更多信息:https://www.sitepoint.com/css-viewport-units-quick-start/