登录
首页 >  文章 >  前端

CSS网格图标文字居中技巧

时间：2026-04-23 17:18:36 262浏览 收藏

想轻松实现CSS网格中图标与文字的精准居中？只需在目标子元素上设置 `justify-self: center`（水平居中）和 `align-self: center`（垂直居中），配合父容器启用 `display: grid`，即可高效、独立地控制单个网格项的对齐方式——无需复杂嵌套或额外包装，现代浏览器原生支持，排查要点清晰明了，是解决网格内局部居中问题的简洁利器。

css网格布局下图标和文字无法居中怎么办_使用justify-self:center和align-self:center

在CSS网格布局中，如果图标和文字无法居中，使用 justify-self: center 和 align-self: center 是一种有效的解决方法。这两个属性可以分别控制网格项在其单元格中的水平和垂直对齐方式。

理解 justify-self 和 align-self

justify-self: center 用于将单个网格项在列轴（通常是水平方向）上居中对齐。
align-self: center 用于将单个网格项在行轴（通常是垂直方向）上居中对齐。

与容器上的 justify-items 或 align-items 不同，justify-self 和 align-self 可以单独作用于某个网格子元素。

如何正确使用

确保父容器是 display: grid，然后在需要居中的子元素上设置：

  • justify-self: center; /* 水平居中 */
  • align-self: center; /* 垂直居中 */

例如：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 200px;
}

.icon-text {
  justify-self: center;
  align-self: center;
}

常见问题排查

如果仍然不居中，检查以下几点：

  • 父容器是否正确设置了 display: grid
  • 子元素是否直接位于网格容器内（非嵌套过深）
  • 是否有其他样式（如浮动、绝对定位）干扰了布局
  • 浏览器是否支持这些属性（现代浏览器基本都支持）

基本上就这些。只要结构正确，justify-self 和 align-self 能快速实现单个网格项的居中。

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

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>