cssflexboxpositioncentering

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>