Marco Menghini - Blog di Copywriting e Web DesignCoding CSS: Come centrare un DIV sia orizzontalmente che verticalmente?

CSS: Come centrare un DIV sia orizzontalmente che verticalmente?

“Do, or do not. There is no try.” [cit. Yoda]

Questo è un articolo molto veloce, ma spero molto utile. Infatti, un problema molto comune che si trovano ad affrontare i web designer è riuscire a centrare un oggetto sia orizzontalmente che verticalmente. Che si tratti di un elemento di design, piuttosto che di box di dialogo poco importa. Dobbiamo trovare un modo per risolvere!

Probabilmente la prima soluzione che ti viene in mente è di settare un altezza e una larghezza fissa, e poi definire il margine su “auto”, in questo modo:

.center {
 width: 200px;
 height: 200px;
 margin: auto;
 }

No, a quanto pare questo non funziona.

Il problema è che questa soluzione centrerà l’elemento solamente orizzontalmente nel suo container. Margin: auto; non centra verticalmente l’elemento. E se provassimo con un margin: 50% 50%;?

.center {
 width: 200px;
 height: 200px;
 margin: 50% 50%;
 }

Accidenti, anche questo non funziona!

Questo perché specifichiamo un margine del 50% rispetto alla larghezza dell’oggetto, che è stata settata nel foglio di stile.

La maggior parte delle persone che si approcciano per la prima volta al Web Design si arrendono e si buttano sul Javascript o sul jQuery per definire dinamicamente la posizione dell’elemento nel centro dello schermo. Non c’è niente di sbagliato in questo, funziona benissimo! Ma esiste una soluzione che non richiede nessuna conoscenza di programmazione, e risolve il problema con il buon vecchio CSS.

Ecco la soluzione:

.center {
 bottom: 0; left: 0; top: 0; right: 0;
 margin: auto;
 position: absolute;
 width: 200px;
 height: 200px;
 }

Wow! Funziona!

Non male, vero? Con un piccolo trucco CSS sarai in grado di posizionare l’elemento nel centro della pagina, o del suo contenitore. Cosa ne pensi? Conosci un metodo più semplice per centrare orizzontalmente e verticalmente un DIV?

Keep in touch!

No Comments

Leave a reply