css - 居中绝对定位的元素

Question

我有一个幻灯片，上面有小圆圈，您可以在其中看到有多少张图片以及哪些是事件的。这些圆圈是 position: absolute;我正在努力使它们居中。

我该怎么做？

这里是 HTML:

<div id="circles">
    <img src="slike/active.png" id="circle1">
    <img src="slike/circle.png" id="circle2">
    <img src="slike/circle.png" id="circle3">
    <img src="slike/circle.png" id="circle4">
</div>

和 CSS:

#circle1, #circle2, #circle3, #circle4 {
position: absolute;
top: 600px;
}


#circle1 {
left: 630px;
}

#circle2 {
left: 655px;
}

#circle3 {
left: 680px;
}

#circle4 {
left: 705px;
}

Answer 1

#circles {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}

#circle1, #circle2, #circle3, #circle4 {
display: inline-block;
}

/* just to make them round */

#circles img {
  border-radius: 50%;
}
body {
margin: 0;
}

<div id="circles">
    <img src="http://placehold.it/35x35" id="circle1">
    <img src="http://placehold.it/35x35" id="circle2">
    <img src="http://placehold.it/35x35" id="circle3">
    <img src="http://placehold.it/35x35" id="circle4">
</div>