div在不同分辨率屏幕上下左右居中

方法一：

div{

position:absolute;

width: 200px;

height:200px;

background:red;

top:50%;

left:50%;

margin-left:-100px;

margin-top:-100px;

}

方法二：

div{

position:absolute;

width: 200px;

height:200px;

background:red;

top: 0;

left: 0;

bottom: 0;

 right: 0;

margin:auto;

}

方法三：

div {

position:absolute;

width: 200px;

height:200px;

background:red;

top:50%;

left:50%;

transform:translate(-50%,-50%);

} 

方法四：

div{

position:absolute;

width: 200px;

height:200px;

background:red;

top: calc((100% - 200px)/2);

left:calc((100% - 200px)/2);

}