一文掌握CSS Grid居中对齐：最简洁的代码实现

一文掌握CSS Grid居中对齐：最简洁的代码实现

本文分享了一段简洁高效的CSS代码片段，利用CSS Grid布局实现元素的垂直水平居中对齐。

代码片段

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值表示内容在容器的中央对齐。

兼容性

place-content: center;的兼容性在现代浏览器中较好，某一些旧版浏览器的不兼容完全可以忽略了。以下是一些常见浏览器的具体支持情况：