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

position:absolute;如果用left，top没法水平居中啊？该怎么办？

2025-01-07 09:52:44

推荐回答（5个）

回答1：

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

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

如果该父元素是body可用screen.width,如果不是，请把该父元素设置成position:relative

回答2：

需要一点小技巧,绝对定位没有水平居中的方法,但是left的值可以使用百分比,比如left:50%;但是这个50%是以div的左上角为基准的,所以要把div的位置在绝对定位之后再向左拉一部分
例子:

Center

回答3：

上面方法还得计算盒子宽度，这个不是最好的方法，一般开发中最好的自适应居中方法是这样的：

希望对你有帮助！

回答4：

例：

html

水平居中

css
.a{
width:100px;/*定义宽度*/
position:absolute;/*绝对定位*/；
left:50%;/*绝对定位到左侧中间位置*/；
margin-left:-50px;/*左移动本身宽度的1/2以保证绝对水平居中*/
}

回答5：

.box{
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;  /*此处的负值是宽度的一半*/
}