align-items: center;
justify-items: center;

.container {
  display: grid;
  place-items: center; /* 所有網格項在單元格內居中 */
}

.container {
  display: flex;
  place-items: center; /* 需注意瀏覽器兼容性 */
}

/* 完整寫法 */
.container {
  align-items: center;   /* 垂直居中 */
  justify-items: center; /* 水平居中 */
}
/* 簡寫 */
.container {
  place-items: center;
}

<div class="container">
  <div class="item">居中內容</div>
</div>
<style>
.container {
  display: grid; /* 或 flex */
  height: 300px;
  border: 2px dashed #ccc;
  place-items: center; /* 一行實現(xiàn)居中 */
}
.item {
  width: 100px;
  height: 100px;
  background: coral;
}
</style>

.container {
  display: grid;
  place-items: center;
}
@media (max-width: 768px) {
  .container {
    place-items: start center; /* 垂直靠頂，水平居中 */
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  place-items: center; /* 每個卡片內容居中 */
  gap: 1rem;
}