方法一
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
}
视频
<video src=""> </video>
音频
<audio>
<source src="" type="" />
</audio>