相关问题：

• 实现元素居中的方式有哪些？

居中的几种方法

定位 + margin: auto

🌰 例子：

这里的父元素设置为相对定位，子元素设置为绝对定位，并且四个定位属性都设置为 0 。如果子元素没有设置宽高，则宽高会等于父元素。

如果子元素设置了宽高，那么显示为设置的宽高大小，但是实际上虚拟的子元素已经撑满了整个父元素，此时再设置 margin 为 auto 则可以实现水平和垂直居中了。

定位 + margin: -value

🌰 例子

首先，子元素没有设置绝对定位时，会在父元素的左上角位置。当设置了 left / top 的偏移都为 50% ，此时子元素会在右下角的位置。此时再设置 margin-left / margin-top 的值为子元素的宽高的一半，将偏移的中心修改为元素的中点。此时即可以实现元素的水平居中和垂直居中。

定位 + transform

🌰 例子：

与上面使用 margin-left / margin-top 的负值方法同理。 transform 的位移是相对于自己的，所以这里 -50% 是相对于自己的宽高计算，并且这里不需要知道自己元素的宽高，使用的场景比 margin 的负值广泛。

table 布局

由于 flex 和 grid 布局的出现，较少使用 table 布局。

🌰 例子：

利用表格的 text-align 和 vertical-align 实现，这两个属性可以使行内元素水平垂直居中。注意 vertical-align 的居中属性值为 middle 。并且要将子元素设置为 inline-block 行内块元素。

flex 布局

🌰 例子：

grid 布局

🌰 例子：