Guida completa per centrare un qualsiasi elemento mediante CSS, guida che descrive come centrare qualsiasi elemento mediante l’unico uso del CSS
Centrare un elemento mediante il CSS è stato in passato una cosa abbastanza semplice bastavano qualche righe di codice e con un table-layout il gioco era fatto.
Poi venne fuori il CSS e la maledetta (è il caso di dirlo) interpretazione tutta personalissima di Internet Explorer (ad onor del vero da IE9 in poi le cose incominciarono ad andare benino…) e tutto divenne odiosamente più ostico e quasi impossibile da gestire.
Questa guida, completa di tutte le possibili eventualità, è stata pensata per esser la più user-friendly possibile.
Sperando di aver fatto cosa grata eccola qui sotto 🙂
Orizzontalmente
è un elemento in line o inline-* (come testo o link)?
.center-children { text-align: center; }
è un elemento a livello di blocco e conosci la larghezza?
.center-me { margin-right:auto; marign-left: auto; width:120px /*per esempio*/ }
è un elemento a livello di blocco e non conosci la larghezza?
.center-me { margin-right: auto; marign-left: auto; display:table; }
Verticalmente
è un elemento in line o inline-* (come testo o link), a linea singola?
.link { height: 100px; line-height: 100px; white-space: nowrap; }
è un elemento in line o inline-* (come testo o link), a linea multipla?
hai due soluzioni, la prima:
.flex-center-vertically { display: flex; justify-content: center; flex-direction: column; height: 400px; }
la seconda:
.ghost-center { position: relative; } .ghost-center::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .ghost-center p { display: inline-block; vertical-align: middle; }
è un elemento a livello di blocco e conosci l’altezza?
.parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */ }
è un elemento a livello di blocco e non conosci l’altezza?
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
Orizzontalmente e Verticalmente
è un elemento a livello di blocco e conosci la larghezza e l’altezza?
.parent { position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; }
è un elemento a livello di blocco e non conosci la larghezza e/o l’altezza?
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
puoi usare flexbox?
.parent { display: flex; justify-content: center; align-items: center; }
Se ti è piaciuto, allora potrebbe anche interessarti Guida completa per cambiare la posizione a qualsiasi elemento
Fonte:
– CSS-Trick