居中有哪几种实现方式
居中的实现方式特别多，这里我罗列出常见的几种。
1. 便用 grid 设置居中。给容器设置 display:grid; align-items:center; justify-content:center;
2. 使用 grid 时还能通过给子项设置 margin:auto 实现居中。给容器设置 display:grid;子项设置 margin:auto;
3. 使用 flex 布局设置居中。容器设置 display:flex; align-items:center; justify-content:center;
4. 使用 flex 时也能通过给子项设置 margin:auto 实现居中。给容器设置 display:flex;子项设置 margin:auto;
5. 便用 tabel-cell 实现垂直居中。容器设置 display:table-cell; vertical-align:middle;孩子如果是块级元素，直接使用左右 margin 等于 auto 实现水平居中。如果是行内元素，给容器设置 text-align:center;
6. 便用绝对定位的方式实现水平垂直居中。容器设置 psition：relative; 孩子设置 position:absolute; left:50%; top:50%; transfrom:translate(-50%,-50%);
7. 还有一种不常用的方法实现垂直居中。给容器加给伪元素，设置 line-height 等于容器的高度。给孩子设置 display:inline-block;
8. 最后还有一种奇葩的方法。容器设置 position:relative 孩子设置 position:absolute; 设置固定宽度和高度;top、left、bottom、right都设置为0; margin 设置为auto,也能实现垂自水平居中。
由于本人水平有限，如有描述不准确的地方请给我留言，欢迎交流~
