一、水平居中

1、行内元素水平居中

在父元素里添加text-align：center即可。代码如下：

        this is item1

效果图：

 2、块级元素水平居中

（1）方法一：使用绝对定位和margin负值（缺点：若子元素宽高改变，margin值也要跟着改变）

（2）方法二：使用绝对定位和transform（缺点：存在兼容性问题）

（3）方法三：使用绝对定位和margin：auto（推荐）

（4）方法四：使用flex布局的justify-content：center（缺点：存在兼容性问题）

代码如下：

 1 
72 

73         
使用绝对定位和margin负值
74 
75 

76         
使用绝对定位和transform
77 
78 

79         
使用绝对定位和margin：auto
80 
81 

82         
使用flex布局
83 

效果图：

二、垂直居中

1、行内元素垂直居中

当line-hight等于height时，可实现行内元素垂直居中，代码如下：

 1 
11 

12         this is item1
13 

效果图：

 2、块级元素垂直居中

（1）方法一：使用绝对定位和margin负值（缺点：若子元素宽高改变，margin值也要跟着改变）

（2）方法二：使用绝对定位和transform（缺点：存在兼容性问题）

（3）方法三：使用绝对定位和margin：auto（推荐）

（4）方法四：使用flex布局，改变主轴方向为垂直方向再使用justify-content：center（缺点：存在兼容性问题）

代码如下：

        
使用绝对定位和margin负值


        
使用绝对定位和transform


        
使用绝对定位和margin：auto


        
使用flex布局

效果图：

若想实现水平垂直居中，结合二者一起使用即可。

参考文档

https://www.jianshu.com/p/7bbc4860a45c