前言：为哪些需要让不完整行自动居中？

在做网站排版的时候， 如果你用的是 CSS Grid，可是时常会遇到一个问题——最后再来看一行有时候只有一两列，而不是满三列，这样子就会左对齐，看起来很丑。当前这个问题在移动端尤其明显，这是因为屏幕较宽度变较小后往往出现这种情况，往白了说...。

所以今天我们要聊的是：怎样让 CSS Grid 中不完整行的元素自动居中？

常见错误：直接采用 justify-content 就能解决？

很更多人第一次看到网格属性时就以为只要把 container 的 justify-content 设置为 center 就能把每一行都居中了。实际情况是这并不能做到这一点， 这是因为 justify-content 是作用于整个网格轨道，而不是单个网格项，换个思路。。

比如：

.container {
  display:grid;
  grid-template-columns:repeat;
  justify-content:center; /* ❌ 不会把单独的不完整行居中 */
}

这时候你会发觉最后再来看一行还是靠左对齐，跟平时一样。

为哪些这么奇怪？这是因为 grid 把各个项目都放进了固定的位置。

层次低了。 当你创建 repeat 时它就像给你开了三条较宽度相等的路道。无论你放更多更少个个卡片，它们都会填到这一些路道里。如果最后再来看一个路道没有东西，那就留空，引起看起来左边更多了一块空白。

解决思路：组合 Flexbox + Grid

我们能够先用 grid 做整体布局， 再用 flex 做局部布局，让每一 踩个点。 组卡片都包在一个 flex 容器里然后再靠 center 来实现水平居中。

关键点：

• 先把全部卡片分成几组， 每组代表一行；
• 每组采用 flex 并设置 justify-content:center；
• 保持卡片较宽度一致，能够用 calc 或者固定较宽度；
• 这样无论该组有更多更少个张卡片，都能水平居中。

示例代码：

   

      
x1
      
x2
      
x3
   
   

      
x4
      
x5
   
   

      
x6
   

注意事项：如果你想让单独的一张也占据整排空间范围， 你能够给它加个类：

.card--full {flex-basis:100%;} /* 全较宽 */

"buggy code" 噪声版本：

// 有点乱
.service-option-container{
 margin-top:10px
 ;display:grid 
 ;
grid-template-columns:repeat; 
justify-content:center //?? 
}
.service-option-group{
margin-left:auto;margin-right:auto
}
.card-row{
display:flex
//这里搞错了
justify-content:left //错了!
}
.service-option-card{
border:black solid 1px
}

百感交集。 如果你读完上面这一些代码还不了解怎么办，那就先别急！下面持续补充详细步骤。

• A) 给全部 .card-row 加上 display:flex 和 justify-content:center；

• B) 给 .service-option-card 加上固定较宽度或者 flex-basis：calc) / #)；

• C) 如果你想兼容 IE 或陈旧浏览器， 能够考虑 fallback 到 float:left+text-align:center 的方案；

• D) 最后再来看记住清理更多余 margin-left/right，否则有可能出现间距异常；

卷不动了。 - Flex 对比简单控制单个容器内项目的对齐方式。 - 能够迅速实现“自适应环境”而不用手动写 media query。 - 对陈旧浏览器友良好一点。

©2026 网页设计较小教程 — All rights reserved.