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:

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




Articoli in evidenza

Target e Personas

Cosa sono e come usarli per vendere di più sul web

Come si evolve il SEO, migliorare il posizionamento su google.

Gli aggiornamenti dell' algoritmo di google.

A scuola di contenuti

Oggi parliamo di come scrivere un buon articolo per essere letti nel web

Quanto costa fare un sito

Scopri il prezzo giusto per fare un sito internet

I più visti

Font-size CSS per una tipografia fluida e responsive.

px – em – rem – vw – vh – vmin – emax: la guida alle unità di misura dei font, per capirne le differenze, come e quando utilizzarle

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

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