本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！
大家好，我是大澈！
本文约 500+ 字，整篇阅读约需 1 分钟。
今天分享一段优质 CSS 代码片段，可以轻松实现元素垂直水平居中对齐。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
div {
display: grid;
place-content: center;
}分享原因
这段代码展示了如何使用 CSS Grid 布局以及 place-content 属性来居中对齐元素。
CSS Grid 是一种强大的布局工具，提供了简单且灵活的方式来实现复杂的布局，而place-content 属性进一步简化了居中对齐的实现。
相较于 Flex 布局，Grid 布局仅仅只需一行代码即可搞定居中对齐！
代码解析
1. display: grid;
设置元素为网格容器。
网格容器可以通过定义网格行和列来布置其子元素。
2. place-content: center;
place-content 是 align-content 和 justify-content 的组合属性。
center 值表示内容在容器的中央对齐。
3. 兼容性
place-content: center; 的兼容性在现代浏览器中较好，某一些旧版浏览器的不兼容完全可以忽略了。
以下是一些常见浏览器的具体支持情况：