css垂直居中

 1 .ele{
 2 display:inline-block;
 3 /*设置元素绝对定位*/
 4 position:absolute;
 5 /*top 50%*/
 6 top: 50%;
 7 /*left 50%*/
 8 left: 50%;
 9 /*css3 transform 实现*/
10 transform: translate(-50%, -50%);
11 }

1 .ele{
2 /*弹性盒模型*/ 
3 display:flex;
4 /*主轴居中对齐*/
5 justify-content: center;
6 /*侧轴居中对齐*/ 
7 align-items: center; 
8 }

1 .box{
2 /*让元素渲染为表格单元格*/
3 display:table-cell;
4 /*设置文本水平居中*/
5 text-align:center; 
6 /*设置文本垂直居中*/
7 vertical-align:middle; 
8 }

1 .div{
2 position:absolute;
3 top:0;
4 bottom:0;
5 left:0;
6 right:0;
7 margin:auto;
8 }