Molto spesso mi è capitato di dover creare un box che fosse sempre visualizzato al centro dello schermo, nel caso in cui questo avesse dimensioni fisse la soluzione è molto semplice, basta assegnare un posizionamento assoluto del 50% dall’alto e da sinistra e poi applicare un margine superiore e sinistro negativo pari alla metà delle rispettive misure, per esempio se il box ha una dimensione di 200x120px il margine sinistro sarà di -100px e il margine superiore di -60px, ma nel caso in cui non conoscessimo le misure esatte di questo box?
Per ovviare a questo problema possiamo utilizzare la proprietà transform di css3 al posto dei margini, basterà scrivere nel css dell’elemento un semplice transform: translate(-50%,-50%), in questo modo diciamo al css di spostare il nostro elemento verso l’alto e verso sinistra di una valore pari alla metà dell’altezza e della larghezza.
Potete vedere un codice di esempio qui sotto:
#box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 3px;
padding: 15px;
color: rgb(73, 69, 69);
background-color: rgb(226, 220, 220);
font-family: arial;
font-size: 15px;
line-height: 20px;
max-width: 800px;
}
Se questa pillola css ti è stata utile condividi l’articolo o lascia un commento per condividere con noi altri metodi o semplicemente lasciarci un saluto.
Image credits “css” disponibile su shutterstock
