1、 需要水平垂直居中的元素的父级设置：position：relative；
再给该元素设置：position：absolute;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
overflow:auto;
(不需要给该元素设置宽高)
注意：高度必须定义，建议加
overflow: auto，防止内容溢出。2、 需要水平垂直居中的元素的父级设置：position：relative；
再给该元素设置：position：absolute;
200px;
height:200px;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
(需要给该元素设置宽高)
3、 弹性盒模型方法(注意兼容)
在该元素的父级设置css属性
display:box;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-o-box;
//还是在父级写
-webkit-box-pack:center;
-moz-box-pack:center;
-o-box-pack:center;
box-pack:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
box-align:center;
4、 display:table-cell方法（父元素中设置）(子元素高 > 父元素高，父元素高会被撑开)
.eg{
display:table-cell;
vertical-align:middle; //不支持 块 元素
text-align:center;
}
5、假设元素宽高设置为百分比，如何让它水平垂直居中
假设该元素div的 width：30%；
height：20%；
div{
30%;//无论宽高百分比为多少
height:20%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}