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

Question

Тельман

css , html

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

Как настроить верстку, чтобы блок one был по середине, а блок two внизу контейнера? <br/><br/>```html
<div class="container">
    <div class="one"></div>
    <div class="two"></div>
</div>
```<br/><br/>```css
.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: bisque;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 50px 0;
}
.container div {
    width: 200px;
    height: 75px;
}
.one {
    background-color: navy;
}
.two {
    background-color: coral;
}
```

17 марта 2024 г. 14:19

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для того чтобы расположить блок `one` по середине и блок `two` внизу контейнера, нужно использовать свойство `align-self: flex-end;` для блока `two`. 

Вот измененный CSS код:

```css
.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: bisque;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 50px 0;
}
.container div {
    width: 200px;
    height: 75px;
}
.one {
    background-color: navy;
}
.two {
    background-color: coral;
    align-self: flex-end;
}
```

Теперь блок `one` будет по середине контейнера, а блок `two` внизу страницы.

Answer 2

.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;
}