使用transform 具体属性说明:transform :translate属性实现元素位置改变,translateX(10px) 实现x坐标轴移动10个单位,如果为负值,则沿着相反方向移动;同理translateY实现Y坐标轴位移;transform:translate(-50%,-50%)表示先沿着x坐标移动元素自身宽度50%的长度(负值相反方向),再沿着y坐标移动元素自身高度的50%长度(负值反向)
top和left属性表示元素距离父元素中的顶端和左边距位置,如:top:50%表示当前元素上端距离其父元素高度的50%位置;left:50%表示元素左端距离父元素宽度的50%位置处。在style设置位置的时候:结合top和left属性,这样很容易控制元素的位置了
实例如下:
<html>
<head>
<style>
#div1
{
width:200px;
height:100px;
background-color:yellow;
position:relative;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#div0{
width:400px;
height:300px;
border:solid 1px grey;
}
</style>
</head>
<body>
<div id='div0'>
<div id='div1'>Hello World</div>
</div>
</body>
</html>