place-items: center 是Grid布局中实现元素水平垂直居中的最简方案，等价于 justify-items: center 和 align-items: center 联用；justify-items 单独使用仅控制水平对齐，无法垂直居中。
Grid布局中元素无法水平垂直居中，通常不是因为“做不到”，而是没用对属性——place-items 是最直接、最简洁的解法，它一步到位同时控制行和列的对齐；而 justify-items 单独使用只能管水平方向（或网格项在单元格内的内联轴对齐），不能实现垂直居中。
只要容器是 display: grid，且子元素是直接子项，给容器加这一行就够了：
justify-items 只作用于“内联轴”（inline axis），在默认 writing-mode 下就是水平方向；它影响的是每个网格项在各自单元格里的**水平对齐方式**，比如 start / end / center / stretch。它对垂直方向完全无效。
如果写了 place-items: center 却没反应，大概率是以下原因：
如果只想让某个特定子元素居中（其余保持默认），不用 place-items，改用该子元素自身的对齐属性：
基本上就这些。place-items 是 Grid 居中的“快捷键”，比 flex 的 justify-content + align-items 更统一；别被 justify-items 的名字误导——它真不管垂直事。用对了，居中不复杂但容易忽略细节。
以上就是Grid网格布局中元素无法水平垂直居中怎么办_结合place-items与justify-items实现完美居中的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
378
收藏
