盒子居中的方法

方法一

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 
}

视频

音频