如何使此 div 居中以在调整窗口大小(移动视图)时将它们保持在堆叠位置

Question

坚持将此div(卡片(居中，但在调整窗口大小时保持它们堆叠。它堆叠完美，但即使左右边距是自动的，我也无法将它们居中。

<div class="card-container">
<div class="card">
<img src="https://picsum.photos/600/500/?random" alt="Random photo" class="card-img">
<div class="card-body">
<p>Caption 1</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/500/500/?random" alt="Random photo" class="card-img">
<div class="card-body">
<p>Caption 2</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/500/200/?random" alt="Random photo" class="card-img">
<div class="card-body">
<p>Caption 3</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/500/900/?random" alt="Random photo" class="card-img">
<div class="card-body">
<p>Caption 4</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/100/500/?random" alt="Random photo" class="card-img">
<div class="card-body">
<p>Caption 5</p>
</div>
</div>
</div>

.S013 form .card-container {
display: flex;
flex-wrap: wrap;
}
.S013 form .card-container .card {
border: solid 1px #f2f2f2;
margin: 5px;
}
.S013 form .card-container .card .card-body {
padding: 10px;
}
.S013 form .card-container .card img.card-img {
height: 200px;
width: 180px;
object-fit: cover;
}

Answer 1

你可以给.card-containerdiv一个叫做justify-content的CSS网格属性。它可以是center，如果我是正确的，我认为在这种情况下你需要什么，尤其是在较大的设备上。阅读更多关于MDNjustify-content的信息。

.card-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.card {
border: solid 1px #f2f2f2;
margin: 5px;
}
.card .card-body {
padding: 10px;
}
.card img.card-img {
height: 200px;
width: 180px;
object-fit: cover;
}

<div class="card-container">
<div class="card">
<img src="https://picsum.photos/500/500/?random" alt="Random photo" class="card-img">
<div class="card-body">
<p>Caption 2</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/500/200/?random" alt="Random photo" class="card-img">
<div class="card-body">
<p>Caption 3</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/500/900/?random" alt="Random photo" class="card-img">
<div class="card-body">
<p>Caption 4</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/100/500/?random" alt="Random photo" class="card-img">
<div class="card-body">
<p>Caption 5</p>
</div>
</div>
</div>

Answer 2

你可以在 css 中尝试

.card {
text-align: center;
}