CSS Vertical Center i Flexbox

Krzysiek Furtak Code Snippets, CSS/SCSS/LESS 2 Comments

Tworząc strony www często potrzebujemy wycentrować jakieś elementy layoutu w pionie. Dzięki flexbox problem możemy rozwiązać w dziecinnie prosty sposób.

[html] <div class="vertical-align-container">
<div>Lorem ipsum dolor sid</div>
<div>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac</div>
</div>
[/html] [css highlight=”4,8″] .vertical-align-container {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
[/css]

A oto demo:

See the Pen VYMeva by Krzysztof Furtak (@KrzysiekF) on CodePen.0

OK a teraz pytanie, które w tej chwili nasówa się wielu osobom. Jak wygląda sytuacja z obsługą przeglądarek tego cuda. Okazuje się, że niezwykle dobrze:

flex-caniuse

Jeśli nie musimy wspierać IE<10 to problem z głowy 🙂