元素水平垂直居中的一些方法

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%);

　　}