CSS place-items: center解析与用法详解

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; /* 一行实现居中 */
}
.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;
}