27人参与 • 2025-06-17 • Css
place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(grid) 和 弹性盒(flexbox) 布局中的对齐方式。它的作用相当于同时设置:
align-items: center; justify-items: center;
在网格布局(grid)中:
.container { display: grid; place-items: center; /* 所有网格项在单元格内居中 */ }
效果:所有子元素在各自的网格单元格内水平和垂直居中
在弹性布局(flexbox)中:
.container { display: flex; place-items: center; /* 需注意浏览器兼容性 */ }
效果:所有子元素在主轴上居中(需配合 justify-content 获得最佳效果)
/* 完整写法 */ .container { align-items: center; /* 垂直居中 */ justify-items: center; /* 水平居中 */ } /* 简写 */ .container { place-items: center; }
浏览器 | 支持版本 |
---|---|
chrome | 59+ |
firefox | 45+ |
safari | 11+ |
edge | 79+ |
ios safari | 11+ |
注意:在 flexbox 布局中,部分旧浏览器可能需要添加 -webkit- 前缀
<div class="container"> <div class="item">居中内容</div> </div> <style> .container { display: grid; /* 或 flex */ height: 300px; border: 2px dashed #ccc; place-items: center; /* 一行实现居中 */ } .item { width: 100px; height: 100px; background: coral; } </style>
.container { display: grid; place-items: center; } @media (max-width: 768px) { .container { place-items: start center; /* 垂直靠顶,水平居中 */ } }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); place-items: center; /* 每个卡片内容居中 */ gap: 1rem; }
总结:place-items: center; 是现代化布局的利器,能大幅简化元素居中代码,特别适合卡片布局、仪表盘、登录框等需要精确对齐的场景。
到此这篇关于css place-items: center解析与用法详解的文章就介绍到这了,更多相关css place-items: center内容请搜索代码网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持代码网!
您想发表意见!!点此发布评论
版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。
发表评论