Ciao a tutti e benvenuti in questa guida dove vi mostrerò vari modi per centrare elementi HTML verticalmente usando regole CSS all'interno di un container.
Centare verticalmente con table e vertical-align
Il classico metodo per centrare un elemento all'interno di un container è usando la proprietà CSS display:table per il genitore e vertical-align: middle per l'elemento da centrare.
Vediamo come con il codice HTML e CSS in basso:
<div class="container">
<p id="centro">Elemento da centrare</p>
</div>
.container{
background: red;
display:table;
}
.container p{
display: table-cell;
vertical-align: middle;
}
Elemento da centrare
Centrare verticalmente con position absolute e relative
Un altro metodo comunemente usato per allineare verticalmente un elemento HTML è tramite l'utilizzo delle regole CCS position:absolute e position:relative. Vediamo in basso un esempio:<div class="container">
<p id="centro">Elemento da centrare</p>
</div>
.container{
position:relative;
}
.container p{
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
Di nuovo vediamo che se facciamo un render di questo codice, vedremo in output una box con un elemento centrato verticalmente come mostrato in basso:
Elemento da centrare
Come centrare verticalmente con Flexbox
Forse il metodo più semplice per centrare un elemento è tramite l'uso di Flexbox. Cone questo metodo dobbiamo specificare regole CSS solo per il genitore. Vediamo come:
<div class="container">
<p id="centro">Elemento da centrare</p>
</div>
.container{
display:flex;
align-items:center;
justify-content:center;
}Elemento da centrare
Ci siamo abbiamo visto 3 modi diversi per centrare verticalmente elementi HTML con regole CSS.
