一、水平垂直居中（宽高不固定）
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%; 0;
2.200px; height:200px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
二、水平垂直居中（宽高固定）
1.200px; height:200px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;
2.200px; height:200px; position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px;
三、水平垂直居中（flex布局）
(1)父级元素 400px; height: 400px; display: flex; justify-content: center;//使子项目水平居中 align-items: center;//使子项目垂直居中
(2)子级元素 200px; height: 200px;
四、水平垂直居中（table-cell布局 ）
(1)父级元素 400px; height: 400px; display: table;
(2)子级元素display: table-cell; vertical-align: middle;//使子元素垂直居中 text-align: center;//使子元素水平居中(相当于td,无法设置高，需要嵌套一层div.inner)
(3)嵌套层display: inline-block; 20%; height: 20%;
五.居中
(1)父级元素 text-align: center
(2)子级元素 display: inline-block;