垂直居中

一、水平垂直居中（宽高不固定）

1.(1)父级元素设置text-align: center; width, height

    (2)子元素设置display: inline-block; vertical-align: middle;

   (3)兄弟元素写空标签<div></div>，其设置display: inline-block; vertical-align: middle; height: 100%; width: 0; 

2.width:200px; height:200px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);

二、水平垂直居中（宽高固定）

1.width:200px; height:200px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;

2.width:200px; height:200px; position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px;

三、水平垂直居中（flex布局）

(1)父级元素 width: 400px; height: 400px; display: flex;   justify-content: center;//使子项目水平居中  align-items: center;//使子项目垂直居中

(2)子级元素width: 200px; height: 200px;

四、水平垂直居中（table-cell布局 ）

(1)父级元素 width: 400px; height: 400px; display: table;

(2)子级元素display: table-cell; vertical-align: middle;//使子元素垂直居中 text-align: center;//使子元素水平居中(相当于td,无法设置高，需要嵌套一层div.inner)

(3)嵌套层display: inline-block; width: 20%; height: 20%;

五.居中

(1)父级元素 text-align: center

(2)子级元素 display: inline-block;