1

2

align-items: center;

justify-items: center;

1

2

3

4

.container {

  display: grid;

  place-items: center; /* 所有网格项在单元格内居中 */

}

1

2

3

4

.container {

  display: flex;

  place-items: center; /* 需注意浏览器兼容性 */

}

1

2

3

4

5

6

7

8

9

/* 完整写法 */

.container {

  align-items: center;   /* 垂直居中 */

  justify-items: center; /* 水平居中 */

}

/* 简写 */

.container {

  place-items: center;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<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>

1

2

3

4

5

6

7

8

9

.container {

  display: grid;

  place-items: center;

}

@media (max-width: 768px) {

  .container {

    place-items: start center; /* 垂直靠顶，水平居中 */

  }

}

1

2

3

4

5

6

.card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  place-items: center; /* 每个卡片内容居中 */

  gap: 1rem;

}