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

Posted 2020-10-13 晨曦橙

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

 

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

 

 

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;
}