CSSGrid实现水平垂直居中方法

一分耕耘，一分收获！既然都打开这篇《CSS Grid水平垂直居中技巧》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

使用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 示例：

<div class="container">
  <div class="item">居中内容</div>
</div>

方法二：分别设置 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 的简写

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~