Per centrare orizzontalmente un elemento di blocco (come <div>), si usa margin: auto;
Impostando la larghezza di un elemento si impedirà dall'estendersi oltre il bordo del suo contenitore.
L'elemento prenderà la sua specifica larghezza, e lo spazio rimanente sarà diviso egualmente tra i due margini.
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Per centrare il testo all'interno di un elemento, si usa text-align: center;
.center {
text-align: center;
border: 3px solid green;
}
Per centrare un'immagine, impostare i margini sinistro e destro con auto e renderlo come elemento di blocco:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Un metodo per allineare gli elementi è usare position: absolute;
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Un altro metodo per allineare gli elementi è usare la proprietà float:
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Quindi possiamo aggiungere il clearfix hack al contenitore dell'elemento per sistemare questo problema:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Ci sono molti modi per centrare verticalmente un elemento in CSS. Una semplice soluzione è usare il padding top e bottom:
.center {
padding: 70px 0;
border: 3px solid green;
}
Per centrare sia verticalmente che orizzontalmente, si usa padding
e text-align: center
:
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
Un altro trucco è usare la proprietà line-height
con un valore che è uguale alla proprietà height
:
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Se padding e line-height non sono opzioni, un'altra soluzione è usare il posizionamento e la proprietà transform
:
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Si può usare anche flexbox
per centrare gli elementi. Da notare solo che flexbox non è supportato in IE10 e versioni precedenti:
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}