大家好，我是大澈！

本文约500+字，整篇阅读约需1分钟。

今天分享一段优质CSS代码片段，可以轻松实现元素垂直水平居中对齐。

div{display:grid;place-content:center;}

分享原因

这段代码展示了如何使用CSSGrid布局以及place-content属性来居中对齐元素。

CSSGrid是一种强大的布局工具，提供了简单且灵活的方式来实现复杂的布局，而place-content属性进一步简化了居中对齐的实现。

相较于Flex布局，Grid布局仅仅只需一行代码即可搞定居中对齐！

代码解析

1.display:grid;

设置元素为网格容器。

网格容器可以通过定义网格行和列来布置其子元素。

2.place-content:center;

place-content是align-content和justify-content的组合属性。

center值表示内容在容器的中央对齐。

3.兼容性

place-content:center;的兼容性在现代浏览器中较好，某一些旧版浏览器的不兼容完全可以忽略了。

以下是一些常见浏览器的具体支持情况：