I'm trying to center a dot inside a div. When I try margin-bottom: 50%;, it pushes the other stuff around. I've also tried setting justify-content and align-items to center.
.slider{ width: 20px; height: 100px; display: flex; flex-direction: column; justify-content: space-evenly;a position: relative; border: 2px solid black; border-radius: 20px;}.line{ border-bottom: 2px solid black; display: flex; justify-content: center; align-items: center;}.selector{ width: 0px; height: 0px; border: 2px solid black;}<div class="slider"><div class="line"><div class="selector"></div></div><div class="line"></div><div class="line"></div><div class="line"></div></div>