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

 

转载于:https://www.cnblogs.com/duanyue/p/8566485.html