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>
New contributor
Sojo Bee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.