При верстки часто часто возникает надобность вертикально выравнять какой-либо блок, не зная его фиксированного размера. Для этих целей отличным решением будет использование свойств flex.
HTML разметка
1 2 3 4 5 |
<div class="main-block"> <div class="block"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repellendus earum ipsam dolor repellat eligendi, distinctio, et nemo obcaecati deleniti aperiam porro! Aspernatur dolore numquam quod nesciunt dicta fugiat, minus nihil assumenda? Quo laborum amet fuga, maxime est consequuntur commodi ex, aperiam dolorem aspernatur earum veritatis dolores minus dignissimos ullam. </div> </div> |
CSS
align-items: center — выравнивает дочерние элементы контейнера с одинаковым отступом или без.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.main-block { background-color: #549150; width: 100%; height: 100%; display: flex; align-items: center; } .block { background-color: #506791; color: #fff; max-width: 500px; padding: 50px 100px; font-size: 18px; } |
Результат: