CSS垂直水平居中方法

水平垂直居中

第一种

#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;}