17370845950

使用CSS Grid实现居中可通过place-items、justify-items与align-items或place-self完成。1. place-items: center最简洁，适用于所有子元素；2. 分开设置justify-items和align-items可精细控制；3. place-self: center用于单独居中某个子项。需确保容器有高度且启用display: grid，适合响应式设计。

用 CSS Grid 实现水平和垂直居中非常简单，只需要在容器上启用 Grid 布局，并设置对齐方式即可。核心是利用 place-items 或分别使用 justify-items 与 align-items。

方法一：使用 place-items

place-items: center; 可以同时设置水平和垂直居中。

.container {
  display: grid;
  place-items: center;
  height: 100vh; /* 确保容器有高度 */
}
.item {
  /* 子元素内容会自动居中 */
}

HTML 示例：

  居中内容

方法二：分别设置 justify-items 和 align-items

• justify-items: center; 控制横向（行轴）对齐
• align-items: center; 控制纵向（列轴）对齐

CSS 示例：

.container {
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100vh;
}

方法三：只让某个子项居中（使用 place-self）

例如：

.container {
  display: grid;
  height: 100vh;
}
.item {
  place-self: center;
}

这种方式不会影响其他子元素的布局。

补充说明

• 确保父容器有明确的高度（如 100vh、固定值或 flex 嵌套）
• display: grid 是前提
• place-items 是 justify-items + align-items 的简写

基本上就这些，不复杂但容易忽略容器高度的问题。