水平垂直居中
第一种
#container{ position:relative;position: relative;width: 520px;height: 280px;background-color: #279ABF;}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background-color: red;
}
第二种
#container{ position:relative;}
#center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px;}
第三种
#container{ position:relative;}
#center{ position:absolute; margin:auto; top:0; bottom:0; left:0; right:0;}
第四种 flex
#container{ display:flex; justify-content:center; align-items: center;}
