centrare elemento verticalmente con css

Centrare verticalmente un elemento con CSS è un compito abbastanza arduo, infatti il più delle volte si ricorre a piccoli stratagemmi in javascript, ma con la proprietà CSS flex centrare un elemento verticalmente diventa un gioco da ragazzi. Nei paragrafi seguenti apprenderai le basi sulla proprietà flex e il modo in cui applicarla per raggiungere lo scopo.

Breve introduzione al Flexible Layout

Il Flexible Box mira a migliorare e rendere più efficiente l’allineamento e la distribuzione degli elementi e dei contenitori nello spazio, anche quando la loro grandezza è sconosciuta o dinamica (da qui trae origine la parola “flex”).

L’idea principale dietro al layout flessibile è quella di dare ai vari contenitori l’abilità di alterare la grandezza degli elementi per riempire al meglio lo spazio disponibile. Un contenitore flessibile espande gli elementi in modo da riempire lo spazio libero o ridurli per prevenire l’overflow.

Nel tutorial vedremo l’applicazione base di questo proprietà, ma più avanti ho già in programma di scrivere un articolo completo riguardante il flexible layout.

Markup Iniziale

La struttura HTML è semplice prevede infatti un contenitore con due elementi al suo interno. Per utilizzare il layout flessibile all’elemento padre “.container” bisogna dare la proprietà display:flex o inline-flex.

Come primo approccio al layout flessibile questa proprietà è più che sufficiente in un futuro approfondimento discuteremo ampiamente anche delle proprietà che i singoli elementi interni al contenitore devono avere per sfruttare al meglio questo layout.

Parola d’ordine: flessibilità

Affrontiamo queste breve foglio di stile per punti:
1.Al container o elemento padre viene data la proprietà display:flex; la quale permetterà ai figli del contenitore di posizionarsi verticalmente e centralmente.
2.Le due sezioni presenti nel markup avranno una larghezza complessiva del 45% ciascuna ed un leggero padding. Come potrai notare non è stata definita alcuna altezza nel sul contenitore ne sugli elementi interni.
3.Alla sezione che ci interessa centrare daremo il compito al browser di calcolare il giusto margine. Si può benissimo semplificare in margin:auto 0;

Risultato

[codepen_embed height=”419″ theme_id=”8048″ slug_hash=”yuktv” default_tab=”result”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/yuktv/’>yuktv</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusioni

Senza l’utilizzo di jQuery e senza troppi giri di codice puoi centrare gli elementi verticalmente utilizzando solo CSS. Conoscevi già questo metodo? Cosa pensi del layout flessibile?