Css中水平垂直居中的几种解决方法

在控制元素的水平、垂直居中问题时，有很多种解决方法，下面介绍几种解决办法：

水平垂直居中：

第一种：css3的transform

.ele{// 父元素
/*设置元素绝对定位*/
    position:absolute;
/*top 50%*/
    top: 50%;
/*left 50%*/
    left: 50%;
/*css3   transform 实现*/
    transform: translate(-50%, -50%);
}

第二种：flex盒子布局

.ele{// 父元素
/*弹性盒模型*/    
    display:flex;
/*主轴居中对齐*/
    justify-content: center;
/*侧轴居中对齐*/    
    align-items: center;  
 }

第三种：display的table-cell

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

第四种：定位配合margin属性

.ele{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}