盒子居中的方法

盒子居中

方法一:  
html,body{            
    height: 100%;            
    width: 100%;        
}      
body{            
    display: flex;            
    justify-content: center;            
    align-items: center        
}    
.box{        
    height: 100px;        
    width: 100px;        
    background-color: red     
}    

方法二: 
.box{        
    height: 100px;        
    width: 100px;        
    background-color: red ;        
    position:absolute;         
    left:50%;        
    top:50%;        
    transform:translate(-50%,-50%);          
}

方法三:兼容性好 
.box{        
    height: 100px;        
    width: 100px;        
    background-color: red ;        
    position:absolute;        
    left:50%;        
    top:50%;        
    margin-left: -50px;  /*高度的一半*/        
    margin-top: -50px;    
}

方法四; 
.box{        
    height: 100px;        
    width: 100px;        
    background-color: red ;        
    margin:auto;        
    position:absolute;        
    left:0;        
    top:0;        
    right:0;        
    buttom:0:           
}​

三角形
方法一: 
.box{        
    height:  0px;        
    width: 0px;        
    border:40px solid rgba(0,0,0,0);        
    border-bottom-color:red    
}     
方法二:     
.box{        
    height:  0px;        
    width: 0px;        
    border:40px solid transparent;        
    border-bottom-color:red    
}