Centrare un contenitore orizzontalmente o verticalmente nella pagina!

Giovanni Canella

10/12/2013

4649

Nella realizzazione di un sito web, una tra le cose che in cui ci possiamo imbattere più spesso è centrare un contenitore all'interno della pagina in orizzontale, in verticale, o perchè no, entrambi per mostrare un messaggio popup o altro. Sebbene possa sembrare semplice la procedura non è immediata, e in questo articolo vediamo come raggiungere tale obiettivo con poche righe di CSS!

Orizzontale

Elementi in linea (inline elements)

Questo è il caso più semplice in quanto se abbiamo di fronte un insieme di elementi quali <img>, <a>, <span>, (detti anche inline elements) :

<div id="contenitore">
  <a href="index.html">Home</a>
  <a href="menu.html">Menu</a>
  <a href="prodotti.html">Prodotti</a>
</div>  

per centrarli all'interno di un contenitore basta una semplice proprietà:

#contenitore {
    text-align: center;
}

[IMMAGINE]

Elementi blocco (block elements)

In questo caso invece siccome abbiamo a che fare con elementi quali <div>, <p>, <header> e una situazione del genere:

<div id="contenitore">
    <div class="articolo">
        Articolo 1
    </div>
</div>

non possiamo usare il metodo di prima, ma dobbiamo andare ad agire sul margine sinistro e destro di quest'ultimo. Per prima cosa fissiamo una lunghezza del 70% di .articolo:

width: 70%;

E successivamente impostiamo i margini laterali in modo automatico, così da centrare l'articolo.

margin: 0 auto;

La seguente scrittura non è altro che un'abbreviazione, e può essere rappresentata anche in questo modo:

margin-left: auto;
margin-right: auto;

Se applichiamo quanto detto all'esempio iniziale avremo:

#contenitore .articolo {
    width: 70%;
    margin: 0 auto;
}

[IMMAGINE]

Più di un elemento di blocco

Se fossimo in questo caso, con più articoli da centrare:

<div id="contenitore">
    <div class="articolo">
        Articolo 1
    </div>

    <div class="articolo">
        Articolo 2
    </div>

    <div class="articolo">
        Articolo 3
    </div>
</div>

possiamo ricorrere all'utilizzo delle flexbox, in quanto ci risulteranno più managgevoli e comode. Attualmente, in base alla data di pubblicazione dell'articolo, non sono ampiamente supportate, ma con il passare del tempo non sarà più un problema. Qui la loro diffusione.

Detto questo andiamo a inserire:

#contenitore .articolo {
    display: flex;
    justify-content: center;
}

Il risultato sarà:

[IMMAGINE]

 

Verticale

Per quanto riguarda il discorso verticale:

Elementi in linea (inline elements)

Il caso più semplice in cui se vogliamo centrare verticalmente dei link come in questo caso:

<div id="contenitore">
  <a href="index.html">Home</a>
  <a href="menu.html">Menu</a>
  <a href="prodotti.html">Prodotti</a>
</div>  

basta specificare un padding equo sia in alto che in basso

#contenitore a {
    padding: 10px 0;   
}

o in alternativa l'altezza della linea: 

#contenitore a {
    line-height: 30px;
}

Elementi blocco (block elements)

In questo caso per centrare verticalmente l'articolo:

<div id="contenitore">
    <div class="articolo">
        Articolo 1
    </div>
</div>

abbiamo due principali alternative:

  1. L'uso di translateY()
  2. Flexbox

Rispettivamente il codice è questo:

#contenitore {
    position: relative;
}

#contenitore .articolo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

In questo modo ..

Oppure nel caso potessimo usare le flexbox:

#contenitore {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

 

 

Ti potrebbero interessare

I più letti