绝对定位后怎样水平居中

Posted 2023-03-21

参考技术A #xxx
position: absolute;
top: 50%;
left: 50%;
background-color: #AAA;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;

就是 绝对定位50% 然后margin 负数为 宽高的一半 有个缺陷就是 宽高必须确定

还有一种 需要嵌套

<div id="xxx">
<div id="xxx2">
<div class="">
这里是 内容撑开的div
</div>
</div>
#xxx
position: absolute;
top: 50%;
left: 50%;
background-color: #AAA;

#xxx2
position: absolute;
top: -50%;
left: -50%;
background-color: #AAA;

可以参考下
全手打 望采纳本回答被提问者采纳

如何让绝对定位的盒子进行水平居中

通常我们在写轮播的时候，都会涉及到轮播图片下方的小圆点，也就是我们可以选择的小圆点要进行位置上的排版，让它居于盒子的中间下方部分。如下图所示：

 

这边就介绍一下这种是怎样来做的。

 

 

html代码：

<div class="box">


<ul class="dian">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

 

</div>

css代码：

.box{
width: 800px;
height:500px;
background:pink;
position: relative;
}

.dian{
width:50px;
height:10px;
margin:auto;
position: absolute;
/* top:0;*/
left:0;
right:0;
bottom:10px;

list-style: none;
}
.dian li{
width: 5px;
height:5px;
border-radius:50%;
margin-right:10px;
float:left;
background:red;
}
.dian li:nth-of-type(1){
background:green;
}

.dian li:nth-of-type(4){
margin-right:0;
}