如何讓絕對定位的盒子進行水平居中

通常我們在寫輪播的時候，都會涉及到輪播圖片下方的小圓點，也就是我們可以選擇的小圓點要進行位置上的排版，讓它居於盒子的中間下方部分。如下圖所示：

 

這邊就介紹一下這種是怎樣來做的。

 

 

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