To achieve the desired layout, it is important to position the smaller circles in relation to the larger one.
An effective way to center them is by utilizing the calc() function.
Next, a sequential set of transformations is applied to each small circle. This involves moving them to the outer edge and then rotating each by 72 degrees (1/5th of 360 degrees) around the central circle. If you are using tools like SASS, this repetitive transformation step can be automated with a loop.
.main {
position: relative;
border: 2px dotted #000000;
border-radius: 50%;
width: 500px;
height: 500px;
}
.circle {
position: absolute;
left: calc(50% - 25px);
top: calc(50% - 25px);
height: 50px;
width: 50px;
border: 2px dotted #000000;
border-radius: 50%;
}
.circle:nth-child(1) {
transform: translateX(250px);
}
.circle:nth-child(2) {
transform: rotate(72deg) translateX(250px);
}
.circle:nth-child(3) {
transform: rotate(144deg) translateX(250px);
}
.circle:nth-child(4) {
transform: rotate(216deg) translateX(250px);
}
.circle:nth-child(5) {
transform: rotate(288deg) translateX(250px);
}
<div class="main">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>