使子元素水平垂直居中的方法

方法一 转行内块方法

通过把子元素display:inline-block；转换成行内块元素，这时给父元素添加text-align:center;该声明对行内元素以及行内块元素生效，可以使子元素实现水平居中，在通过给父元素添加line-height行高，行高属性值等于父元素自身的高度，可以使子元素行内块在垂直的中线排列，最后给子元素添加vertical-align:middle;可以使子元素对齐方式从底线对齐，变成中线对齐。

方法二 使用定位方法实现居中

通过给父元素添加定位和给子元素添加绝对定位position:absolute;同时给子元素添加left:0;right:0;top:0;bottom:0;margin:auto;实现水平垂直居中，或通过left:50%;top:50%;位移父元素大小的一半再减去自身的一半大小transform:translate(-50% -50%);实现居中。

方法三 转换成弹性布局方法

通过给父元素添加display:flex；把父元素转变成弹性盒，再给容器添加子项目主轴居中justify-content:center;交叉轴居中align-items:center;

方法四 转换成网格布局方法

通过把网格布局创建一个一行一列的网格，再使用place-content:center center；把整个网格居中放置。

或通过给父元素添加display:grid;把父元素转换成网格布局，再通过grid-template-columns/grid-template-rows把元素分成等比例的网格，再使用grid-template-areas给中心的单元格命名，最后使用grid-area把元素放置在中心区域实现居中。