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?
