In questo articolo vi spiegherò alcuni metodi per centrare verticalmente e orizzontalmente un DIV, per esempio un logo al centro di una schermata o un testo al centro di un banner, in una semplice pagina HTML o all’interno di una pagina reattiva bootstrap. Inserire un elemento nel centro di una pagina web o di una sezione interna alla pagina è una procedura non sempre così banale, soprattutto se ragionata in termini di compatibilità con i browser, o di velocità di scrittura, o di forzatura di elementi già strutturati, o di visualizzazione su dispositivi con differenti risoluzioni. Di seguito ho riportato 5 modi di centrare un DIV all'interno di un CONTAINER da utilizzare nei seguenti 3 casi:
Come centrare un DIV all'interno di una pagina HTML settando lo stile del DIV:
1. Semplice centratura orizzontale. Per centrare orizzontalmente un DIV di una determinata larghezza sarà sufficiente un solo comando CSS (margin:auto). Questa istruzione lo farà adattare in maniera equa a destra e sinistra del contenitore: CSS
.container {
margin: 10px auto;
background: #000;
width: 200px;
height: 200px;
}
.horizontally {
background: yellow;
height: 30px;
width: 30px;
margin:10px auto;
text-align: center;
line-height: 30px;
}
HTML
<div class="container"><div class=" horizontally">1</div></div>
ESEMPIO
2. Centratura orizzontale e verticale in position absolute Se invece vogliamo centrare un DIV di una determinata altezza sia orizzontalmente che verticalmente, a prescindere dalle dimensioni del suo contenitore e a condizione di lavorare in position absolute, basterà distanziare il DIV del 50% dal limite superiore e sinistro del CONTAINER e spostare indietro il margine superiore e sinistro della metà dell'altezza e della larghezza del DIV nel modo seguente: CSS
.container {
background: #000;
margin:10px auto;
width: 200px;
height: 200px;
position: relative;
}
.centred2 {
position: absolute;
width: 30px;
height: 30px;
top: 50%;
left: 50%;
margin: -15px 0 0 -15px;
background: yellow;
}
HTML
<div class="container"><div class="centred2">2</div></div>
ESEMPIO
Come centrare un DIV all’interno di una pagina HTML settando lo stile del contenitore:
3. Centratura in colonna sia orizzontale che verticale tramite display flex In questo caso, a differenza del precedente, la centratura del DIV sarà condizionata dai valori CSS del contenitore (display: flex; justify-content: center; flex-direction: column; align-items: center;): CSS
.container {
margin: 0 auto;
background: #000;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.centred3 {
background: yellow;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
margin: 5px;
}
HTML
<div class="container"><div class="centred3">3</div><div class="centred3">3</div></div>
ESEMPIO
4. Centratura in linea sia orizzontale che verticale tramite display flex Il CSS del CONTAINER può essere semplificato attribuendogli tre soli valori (display: flex; justify-content: center; align-items: center;) in questo modo:
.container {
margin: 0 auto;
background: #000;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
HTML
<div class="container"><div class="centred3">3</div><div class="centred3">3</div></div>
ESEMPIO
Come centrare un DIV all’interno di una di una pagina reattiva bootstrap
5. Centratura orizzontale e verticale tramite d-flex Se infine vogliamo centrare un DIV all’interno di una di una pagina reattiva bootstrap lo stile del CONTAINER lo ricaviamo da bootstrap in questo modo: CSS
.container {
background: #000;
width: 200px;
height: 200px;
}
HTML
<div class="d-flex justify-content-center align-items-center container"><div class="centred3">3</div><div class="centred3">3</div></div>
ESEMPIO