Centrare un DIV dentro un altro DIV
5 metodi per centrare un DIV in orizzontale e in verticale in una pagina HTML con gli stili CSS, o all’interno di una pagina reattiva bootstrap

Html e css
Autore:
28 apr 2018

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

1
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

2

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

3
3
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

3
3

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

3
3


I più visti

Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori

Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Organizzare la comunicazione sul web

Breve guida per le piccole imprese

Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS

Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Centrare un DIV dentro un altro DIV

5 metodi per centrare un DIV in orizzontale e in verticale in una pagina HTML con gli stili CSS, o all’interno di una pagina reattiva bootstrap

Come creare un e-commerce di successo

Gli italiani acquistano on-line?