CSS 布局——居中 ​

水平居中 ​

margin: 0 auto; ​

实际项目中最常见的是水平居中，一般来说这个最容易实现，使用margin: 0 auto;即可实现

flex布局 ​

文本和块级元素都适用

使用grid布局 ​

目前 PC 端各浏览器对grid的支持越来越多了，基本已经到了可以不考虑兼容性的问题了，手机端的支持度还不够，查看grid个浏览器的支持度

垂直居中 ​

使用绝对定位和负外边距对块级元素进行垂直居中 ​

在知道被居中块级元素的尺寸的情况下，可以使用绝对定位和负外边距对块级元素进行垂直居中。

使用绝对定位和 transform ​

在不知道被居中元素的尺寸的情况下（当然知道的情况下也可以），可以使用绝对定位和 transform 进行垂直居中，因为 transform 中 translate 偏移的百分比就是相对于元素自身的尺寸而言的。

使用绝对定位和 margin百分比 ​

在清楚自己的尺寸在父元素中的占比的情况下，可以使用绝对定位和 margin 进行垂直居中。

使用绝对定位和margin: auto; ​

使用绝对定位将子元素的top和bottom设置成相等的值，再使用margin: auto;

使用padding实现子元素的垂直居中 ​

给父元素设置相等的上下内边距，子元素自然是垂直居中的，这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确垂直居中。

添加额外的元素 ​

添加一个父元素高度一半的子元素，这样要居中的子元素默认的 top 就到了父元素的 50%位置，然后设置一个margin-top，值为自身高度的一半的负值。

flex布局 ​

文本和块级元素都适用

第二种flex布局 ​

使用grid布局 ​

目前 PC 端各浏览器对grid的支持越来越多了，基本已经到了可以不考虑兼容性的问题了，手机端的支持度还不够，查看grid个浏览器的支持度

水平垂直居中 ​

flex加margin: auto; ​

grid布局 ​