css實現未知元素寬高垂直居中和水平居中的方法

第一種：display：table-cell的方式

.container { /*父級容器*/
    display:table-cell;
    text-align:center; 
    vertical-align:middle;     
}

第二種：flex盒子佈局

.container {  /* 父級容器 */
    display:flex;
    justify-content: center;
    align-items: center;  
 }

第三種：css3的transform

.container { /* 父容器 */
    position: relative; 
    width: 200px;
    height: 200px;  
}

.container  .box { /* 子容器 */
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}