方法一
最常规的方法
#dv{
width:200px;
height:200px;
background-color:hotpink;
position:absolute; /*父元素需要相对定位*/
top:50%;
left:50%;
margin-top:-100px; /*自身二分之一的高*/
margin-left:-100px; /*自身二分之一的宽*/
}
方法二
#dv{
width:200px;
height:200px;
background-color: hotpink;
margin:auto;
position:absolute; /*父元素需要相对定位*/
left:0;
right:0;
top:0;
bottom:0;
}
方法三
使用css3的样式,注意兼容哦~
#dv{
width:200px;
height:200px;
background-color:hotpink;
position:absolute; /*父元素需要相对定位*/
top:50%; /*移动父元素的一半*/
left:50%;
transform: translate(-50%,-50%);
/*2D变换位移,往回移动的是自身的一半*/
}