<div></div>
用position
第一种
body,html{
width: 100%;
height: 100%;
}
div{
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #009688;
margin: auto;
}
/*left,right,top,bottom都给0 margin:auto*/
第二种
body,html{
width: 100%;
height: 100%;
}
div{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background: #009688;
margin: -100px 0 0 -100px;
}
/*left,top都50% margin 负值div块的宽高一半*/
第三种
body,html{
width: 100%;
height: 100%;
}
div{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background: #009688;
transform: translate(-50%,-50%);
}
/*transform: translate 这里给-50% 就行 不用给具体的像素*/
用flex
body,html{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
div{
width: 200px;
height: 200px;
background: #009688;
}
/*
align-items 垂直
justify-content 水平
*/
