[SOLVED] Element attaching to the bottom of container

Element attaching to the bottom of container

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>

Solution

You can set the height to 100% for line and margin: auto for the dot:

.line{
    border-bottom: 2px solid black;
    display: flex;
    height: 100%;
}
.selector{
    border: 2px solid black;
    margin: auto;
}

.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;
    height: 100%;
}
.line:last-child {
    border-bottom: 0;
}
.selector{
    border: 2px solid black;
    margin: auto;
}

<div class="slider">
    <div class="line">
        <div class="selector"></div>
    </div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
</div>