宽高未知垂直水平居中

宽高未知情况下垂直水平居中很多情况下都会遇到

查了蛮多大家分享的小例子，我也来记录一下

这里是CSS3的 transform 属性，可以在IE9及以上的浏览器水平垂直居中chrome firefox也是没有问题

    
   
   

        
    
    

     
     
            这里是一段话这里是一段话
     
     

            这里是一段话这里是一段话
     
     

            这里是一段话这里是一段话
     
     

        
    
    
    
   
   
.total{
    width: 50%;
    height: 500px;
    border: 1px solid #000;
    position: relative;
}
.modal{
    background: palegreen;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}.total{
    width: 50%;
    height: 500px;
    border: 1px solid #000;
    display: table;
}
.modal{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: palegreen;
}

下面是效果图：

下面这个把父级设置成display：table；子级设置成display：tablecell；

子级会充满父级，如果父级下面还有多个元素则该子级会占据一半的父级