Vai al contenuto

Centrare un DIV in verticale e orizzontale

Spesso ci capita di dover centrare degli elementi contenuti all’interno di un <div> più grande e di dimensioni prefissate. Sappiamo che se utilizziamo l’attributo margin: 0 auto; l’oggetto viene centrato in orizzontale. Scrivere margin: 0 auto; equivale a dichiarare:

 margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

Tuttavia, questo metodo non centra l’oggetto contenuto nel <div> in verticale. In realtà, anche utilizzando margin-top: auto e margin-bottom: auto, non risolveremmo un bel niente. 

Per risolvere questo piccolo grande problema, ci viene in aiuto un trucchetto che permette di risolvere il problema. Vedremo come centrare l’oggetto in verticale e in orizzontale relativamente alla pagina, quindi al tag <body>. Per fare questo, occorre definire un #ID nel nostro foglio di stile come di seguito specificato:

 #absolute_center {
    width: 100px;
    height: 100px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: blue;
}

e poi applicarlo al tag <div>

<div id="absolute_center">Questo DIV è centrato rispetto alla pagina</div>

Con lo stesso meccanismo, possiamo centrare un <div> all’interno di un altro <div>, ma sarà necessario specificare delle dimensioni prefissate sia in altezza che in larghezza anche per il <div> più esterno.

 #inner{
    background: red;
    bottom: 0;
    height: 100px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
}

#outer {
    border:1px solid black; 
    position: relative;
    height: 400px;   
    width: 400px;    
}

e quindi, in html, scriveremo:

 <div id="outer">
    <div id="inner">
        DIV centrato all'interno di un DIV di dimensioni 400x400px
    </div>
</div>

Semplice, no?