如何在所有设备中居中放置可滚动的卡片容器？

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  overflow: scroll; /* 滚动 */
}

.card-container {
  width: 80%; /* 相对宽度 */
  height: 400px; /* 固定高度 */
}

.card {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 20px;
}

<div class="container">
  <div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <!-- 更多卡片... -->
  </div>
</div>