css/css3 未知元素宽高，垂直居中和水平居中

未知元素的宽高情况下  垂直居中和水平居中

第一种 flex盒布局 （推荐）

/*弹性盒模型*/

/*主轴居中对齐*/

/*侧轴居中对齐*/

.ele{
display:flex;
justify-content: center;
align-items: center;
} 

 

第二种 css3的transform

.ele{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 

第三种 display的table-cell  表格单元格

.box{
    display:table-cell;
    text-align:center; 
    vertical-align:middle;     
} 

 

 

 

 

.