Sergio Pinna

Web Designer

bullseye

Guida completa per centrare un qualsiasi elemento mediante CSS

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

Condividi questo articolo