css绝对定位如何水平居中？
7个回答
展开全部
定位是没法水平居中的，必须给定位的元素设置一定的值，如果你要水平居中可以用javascript做到
left的值 = （定位元素的父元素宽度 - 定位元素宽度）/2
如果该父元素是body可用screen.width,如果不是，请把该父元素设置成position:relative
left的值 = （定位元素的父元素宽度 - 定位元素宽度）/2
如果该父元素是body可用screen.width,如果不是，请把该父元素设置成position:relative
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
需要一点小技巧,绝对定位没有水平居中的方法,但是left的值可以使用百分比,比如left:50%;但是这个50%是以div的左上角为基准的,所以要把div的位置在绝对定位之后再向左拉一部分
例子:
<html>
<head>
<title>Center</title>
<style>
div {width:400px; height:400px; background:#f11; position:absolute; top:50%; left:50%; margin-left:-200px; margin-
top:-200px; }
</style>
</head>
<body>
<div></div>
</body>
</html>
例子:
<html>
<head>
<title>Center</title>
<style>
div {width:400px; height:400px; background:#f11; position:absolute; top:50%; left:50%; margin-left:-200px; margin-
top:-200px; }
</style>
</head>
<body>
<div></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
上面方法还得计算盒子宽度，这个不是最好的方法，一般开发中最好的自适应居中方法是这样的：
希望对你有帮助！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
例：
html
<div class="a">水平居中</div>
css
.a{
width:100px;/*定义宽度*/
position:absolute;/*绝对定位*/；
left:50%;/*绝对定位到左侧中间位置*/；
margin-left:-50px;/*左移动本身宽度的1/2以保证绝对水平居中*/
}
html
<div class="a">水平居中</div>
css
.a{
width:100px;/*定义宽度*/
position:absolute;/*绝对定位*/；
left:50%;/*绝对定位到左侧中间位置*/；
margin-left:-50px;/*左移动本身宽度的1/2以保证绝对水平居中*/
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.box{
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px; /*此处的负值是宽度的一半*/
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
