css绝对定位如何水平居中？

来源：百度知道 编辑：UC知道 时间：2024/05/12 16:45:27
position:absolute;
如果用left，top没法水平居中啊？该怎么办？

需要一点小技巧,绝对定位没有水平居中的方法,但是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
<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;  /*此处的负值是宽度的一半*/
}

定位是没法水平居中的，必须给定位的元素设置一定的值，如果你要水平居中可以用javascript做到

left的值 = （定位元素的父元素宽度 - 定位元素宽度）/2