1、通过绝对定位的方式 absolute 负margin

首先知道子元素的宽高，给子元素设置top：50%；left：50%，但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中示。借助外边距的负值，负的外边距可以让元素向相反方向定位。通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了

2、absolute transform （过渡）

使用绝对定位的方式实现水平垂直居中。容器设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);

3、absolute margin auto

将子元素的上下左右距离都设为0，然后将margin设为auto，这种方法也需要知道子元素的宽高。

4、使用flex布局设置居中

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

给容器设置：

display: flex;写在父元素上这就是定义了一个伸缩容器

justify-content主轴对齐方式，默认是横轴

align-items 纵轴对齐方式，默认是纵轴

5、给容器加给伪元素line-height

设置line-height等于容器的高度。给孩子设置display: inline-block;。只对文本有效果，对定宽高的div是没有用的。所以在文本水平垂直居中时使用。

6、tabel-cell实现垂直居中

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

而且tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

使用tabel-cell实现垂直居中,容器设置 display: table-cell;;

vertical-align: middle属性设置元素的垂直对齐方式

子元素如果是块级元素，直接使用左右margin:auto实现水平居中。如果是行内元素，给容器设置text-align: center

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素inline, 内联块inline-block, 内联表inline-table, inline-flex元素水平居中都有效。