Come centrare un box al centro dello schermo con css

Come centrare un box al centro dello schermo con css

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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

social-image-embed
Up Next:

Guida: come hostare Iframely e creare un server di gestione degli embed privato utile da integrare in CkEditor

Guida: come hostare Iframely e creare un server di gestione degli embed privato utile da integrare in CkEditor