Как разместить один блок по середине а другой внизу?

Question

[Дмитрий Ярощук]

Как разместить блок one по середине, а блок two внизу ?

<div class="container">
        <div class="one"></div>
        <div class="two"></div>
    </div>

.container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: bisque;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 50px 0;
    }
    .container div {
        width: 200px;
        height: 75px;
    }
    .one {
        background-color: navy;
        justify-self: center;
        align-self: center;
    }
    .two {
        background-color: coral;
        justify-self: center;
        align-self: center;
    }

Comments

[Ankhena]

Картинки нет, поэтому угадайка.
Угадайка говорит, что проще гридами.
Либо абсолютами.

Ну либо добавьте before равный по высоте нижнему. Но это не будет держаться без подпорок.

Answer 1

[Андрей Пренрек]

.one {
    background-color: navy;
    justify-self: center;
    align-self: center;

    // Добавь первому ширину
    // width: 50%; или width: 100px;

    // и пусть етот блок отступит от краев, то есть станет посередине
    // margin: 0 auto;

    // итог
    
    width: 50%;
    margin: 0 auto;
    
}

.two {
    background-color: coral;
    justify-self: center;
    align-self: center;
}