Ciao! Oggi ti mostro come faccio a centrare ogni elemento all’interno di una pagina web, utilizzando solo una riga di CSS.

Iniziamo subito creando i soliti 2 file che utilizziamo in ogni tutorial: index.html e style.css

In index.html impostiamo la pagina minima html.

In style.css inseriamo le impostazioni di base:

Resettiamo margini e padding, e assegniamo a tutti gli elementi,(tramite il selettore universale *), la dichiarazione box-sizig:border-box;

Creiamo un div con classe container, poi passiamo al foglio di stile e gli assegniamo le proprietà e i rispettivi valori.

Creiamo un altro contenitore con classe contenuto, all’interno del container.

Nel foglio di stile, gli assegniamo un bordo, un’altezza e una larghezza.

Visualizzandolo sul browser, ci accorgiamo che viene posizionato in alto a sinistra subito dopo l’h1, segue quindi il normale flusso della pagina.

Ma noi vogliamo posizionarlo al centro del suo contenitore(container), ecco cosa faremo:

Creiamo la classe centra, l’ assegniamo al contenuto, e nella regola di stile, diamo le seguenti dichiarazioni:

position:relative;

top:50%;

left:50%;

Il box contenuto, si sposta del 50% da sinistra a dall’alto(minuto 1.36 del video sotto).

Ecco la MAGIA!

Inseriamo nella regola con selettore centra, la seguente dichiarazione:

transform:translate(-50%, -50%);

E immediatamente il box contenuto si allinea perfettamente al centro, sia orizzontalmente che verticalmente del suo contenitore container.

A questo punto, possiamo utilizzare la classe centra in ogni elemento della nostra pagina.

Con questo abbiamo concluso! Spero che il video-tutorial ti possa essere utile per i tuoi progetti.

Per scaricare i file che abbiamo utilizzato in questo articolo, clicca su Download e dopo decomprimi il file Zip.

Ecco il video-tutorial completo

Ciao alla prossima! 🙂


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *