Seperti yang terlihat pada gambar di atas, posisi lingkarang tersebut tepat berada di tengah – tengah, seimbang antara kiri & kanan juga atas & bawah.
Untuk cara membuatnya lihat scriptnya si bawah ini, sangat sederhana :
CSS
display:flex;
align-items:center;
width:400px;
height:400px;
background:#eee;
}
.lingkaran {
background: #e51e63;
border-radius: 50%;
box-shadow: 0px 5px 10px -2px #e51e63;
height: 50px;
margin: 0 auto;
width: 50px;
}
HTML
<span class=”lingkaran”></span>
</div>
Bagian yang perlu diperhatikan adalah pada property css pada class .wrapper. Disana ada property display:flex; property ini berguna untuk mengatur element yang ada di dalamnya, jadi element yang ada di dalam wrapper saya buat supaya beris berdasarkan garis vertikal. Dan property align-items:center; berfungsi agar item – item yang ada di dalam wrapper berada pada posisi tengah yang di ambil dari garis vertikal atau garis yang di tarik dari atas ke bawah.