<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;将红色框居中时，该框不会改变其位置。
aling-items 仅当父项具有高度时才起作用。
如果你将 a 设置height: 100vh为 body，它就会起作用。
您还可以通过添加一些内容来更改此行为。
您还可以检查：https ://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element