使用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>
9077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
