9.1 Centratura orizzontale
Centrare gli elementi su una pagina web è uno dei compiti principali del web design. Permette di creare layout esteticamente piacevoli e facili da leggere. Di seguito esamineremo diversi metodi per centrare gli elementi orizzontalmente e verticalmente utilizzando tecniche CSS moderne.
1. Centratura degli elementi bloccati con margin: auto
Uno dei modi più semplici per centrare gli elementi bloccati è utilizzare margin: auto.
Esempio:
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
<div class="centered-box"></div>
Spiegazione del codice:
margin: 0 auto;: imposta margini automatici a sinistra e a destra, centrando l'elemento orizzontalmente
2. Centratura degli elementi in linea con text-align
Per centrare elementi in linea o incorporati all'interno di un elemento bloccato, si può usare la proprietà text-align: center.
Esempio:
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
<div class="container">
<div class="inline-element">Elemento in linea</div>
</div>
Spiegazione del codice:
text-align: center;: centra gli elementi in linea all'interno di un contenitore bloccato
3. Centratura degli elementi con Flexbox
Flexbox offre un modo flessibile e semplice per centrare gli elementi sia orizzontalmente che verticalmente.
Esempio:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Spiegazione del codice:
display: flex;: imposta il contenitore come Flexboxjustify-content: center;: centra gli elementi orizzontalmentealign-items: center;: centra gli elementi verticalmente (sarà esaminato più in dettaglio in seguito)
9.2 Centratura verticale
1. Centratura con Flexbox
Flexbox offre un modo semplice per centrare verticalmente gli elementi.
Esempio:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Spiegazione del codice:
align-items: center;: centra gli elementi verticalmente
2. Centratura con CSS Grid
CSS Grid offre potenti funzionalità per centrare gli elementi:
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="grid-container">
<div class="centered-box"></div>
</div>
Spiegazione del codice:
display: grid;: imposta il contenitore come CSS Gridplace-items: center;: centra gli elementi sia orizzontalmente che verticalmente
3. Centratura verticale con posizionamento assoluto e trasformazione CSS
Utilizzare il posizionamento assoluto e la trasformazione CSS permette di centrare verticalmente gli elementi.
Esempio:
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="container">
<div class="centered-box"></div>
</div>
Spiegazione del codice:
position: absolute;: imposta l'elemento con posizionamento assoluto rispetto al contenitoretop: 50%;,left: 50%;: sposta l'elemento al 50% dai bordi superiore e sinistro del contenitoretransform: translate(-50%, -50%);: sposta l'elemento del 50% della sua larghezza e altezza per centrarlo
4. Centratura verticale con tabelle e celle
Utilizzare tabelle e celle per centrare verticalmente gli elementi.
Esempio:
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
<div class="table-container">
<div class="table-cell">
<div class="centered-box">Elemento centrato</div>
</div>
</div>
Spiegazione del codice:
.table-container: crea un contenitore con displaytable.table-cell: crea una cella di tabella con allineamento verticalemiddle
GO TO FULL VERSION