使用CSS Grid垂直居中可通过align-items和justify-items实现；推荐用place-items: center简写或对单个子元素设置align-self与justify-self，结合min-height: 100vh避免溢出。
要使用 CSS Grid 实现垂直居中布局，最直接的方法是利用
align-items
和
justify-items
属性，或者在单个项目的情况下使用
align-self
和
justify-self
。下面介绍几种常见且实用的方式。
1. 父容器设置 Grid 并居中所有子元素
如果你希望容器内的所有子元素都垂直水平居中，可以这样设置：
.container { display: grid; height: 100vh; /* 占满视口高度 */ align-items: center; /* 垂直居中 */ justify-items: center; /* 水平居中 */}
这个方法适用于只有一个子元素的情况，或你希望所有子项都居中对齐。
2. 使用 grid-template-areas 精确控制位置
当你需要更精确地控制布局时，可以用
grid-template-areas
配合
place-items
实现居中：
立即学习“前端免费学习笔记（深入）”；
.container { display: grid; height: 100vh; place-items: center; /* 同时设置 align-items 和 justify-items */}
place-items: center
是
align-items
和
justify-items
的简写，让内容在交叉轴和主轴都居中。
Seede AI
AI 驱动的设计工具
586 查看详情
3. 单个子元素居中（推荐灵活方式）
如果容器中有多个元素，但只想让其中一个垂直水平居中，可以针对该子元素单独设置：
.container { display: grid; height: 100vh;}.centered {justify-self: center; / 水平居中 /align-self: center; / 垂直居中 /}
这种方法不会影响其他子元素的布局，灵活性更高。
4. 使用 min-content 高度避免溢出
有时内容较少，但仍需在视口中居中，可结合
min-height
或
height: 100vh
来确保容器有足够的空间：
.container { display: grid; min-height: 100vh; align-items: center; justify-items: center;}
使用
min-height
而不是
height
可以防止内容过多时被截断。
基本上就这些。CSS Grid 提供了非常简洁的方式来实现垂直居中，关键是理解
align-items
控制垂直对齐，
justify-items
控制水平对齐。实际开发中根据结构选择合适的方法即可，不复杂但容易忽略细节。
以上就是如何用css grid实现垂直居中布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1068780.html
微信扫一扫 
支付宝扫一扫 
