使用position生成绝对定位的元素
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
如何让元素居中
方法一
针对已知宽高,可使用margin
.box{
width:600px;
height:300px;
position:absolute;
/*position:fixed;*/
left:50%;
top:50%;
margin-left:-300px;/*宽度的一半*/
margin-top:-150px;/*高度的一半*/
}
或者使用
margin:auto;
方法二
使用css3中的transform,未知宽高和已知宽高都可使用
1.横向居中
.box{
width:auto;
height:40px;
padding:20px;
position:absolute;
top:50px;
left:50%;
transform:(-50%,-50%);
}
2.横竖都居中,将上面top改为
top:50%;
更多推荐
css使用position定位如何让元素居中
发布评论