1、实现水平垂直居中

（1）flex布局+其属性justify-content、align-items

          

1. justify-content：flex布局中的一个属性，调整垂直轴上的对齐方式

    取值center时，表示items沿中心排布

2. align-items：调整每一行里各个item水平轴上的对齐方式

   取值center时，表示每个item沿着container的水平中心线分布

（2）flex布局 + margin: auto

（3）绝对定位absolute+transform 

（4）绝对定位absolute +  margin: auto

（5）相对定位relative + margin

（6）父元素 table + 子元素 inline-block

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中

（7）父元素grid布局

1.align-self： 实现水平居中。沿着 列轴线（垂直方向） 对齐 网格项中的内容

2.justify-self： 实现垂直居中 。将 网格项中的内容 对齐到 网格区域 的水平中间位置