3 semplici modi per centrare un elemento con i CSS

Hai bisogno di centrare un elemento HTML e non sai da dove cominciare? Dai un'occhiata a queste tecniche.

Punti chiave

Centrare gli elementi nei layout web è sempre stato una sfida, ma i moderni CSS ora supportano un facile posizionamento centrale.
Flexbox è il metodo più utilizzato per centrare gli elementi, fornendo un modello di layout flessibile che consente un facile allineamento.
Anche la griglia CSS e il posizionamento CSS sono metodi efficaci per centrare gli elementi su una pagina Web, offrendo un controllo preciso sul layout e sull'allineamento.

Centrare un elemento nel layout web è una sfida che ha sempre frustrato i designer. Non è sempre stato facile realizzarlo, ma molti progetti richiedono un posizionamento centrale. Fortunatamente, i moderni CSS ora hanno un buon supporto per la centratura.

Scopri come centrare un div orizzontalmente e verticalmente utilizzando Flexbox, CSS Grid e il posizionamento CSS.

Un semplice file HTML per esercitarsi nella centratura

I seguenti esempi utilizzano tutti un documento HTML minimo per dimostrare la centratura con i CSS. Utilizza questo markup e varia il CSS in base a ciascuna sezione per vedere come si comportano queste proprietà.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 100px; height: 100px; }
 body { height: calc(100vh - 16px); }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Utilizzo di Flexbox per centrare un elemento Div

Dovrai comprendere le nozioni di base di Flexbox prima di utilizzarlo per centrare un elemento div. Fortunatamente, Flexbox segue un approccio semplice, motivo per cui è il più utilizzato. Fornisce un modello di layout flessibile che semplifica l'allineamento e la distribuzione dello spazio tra gli elementi in un contenitore, rendendolo ideale per centrare gli elementi.

Utilizza il seguente CSS per ottenere la centratura con Flexbox.

Avvolgi il tuo elemento div all'interno di un contenitore. Applica la proprietà display:flex al contenitore per attivare il layout Flexbox. In un semplice caso di test, il corpo può fungere da contenitore:
```
body {
  display: flex;
}
```
Utilizza le proprietà justify-content e align-items per allineare gli elementi rispettivamente lungo l'asse principale (orizzontale) e l'asse trasversale (verticale). Per centrare entrambi gli assi, imposta queste proprietà su center. Per una semplice demo, dovresti anche impostare l'altezza del corpo su 100vh, in modo da poter vedere l'effetto dell'allineamento verticale.
```
body {
  justify-content: center;
  align-items: center;
}
```
Assegna al div un colore di sfondo per visualizzarne il posizionamento nella pagina finale:
```
div { background-color: red; }
```

Visualizzando il risultato in DevTools di Google Chrome, puoi vedere come le due proprietà controllano l'allineamento lungo ciascun asse:

Utilizzo della griglia CSS per centrare un elemento Div

L'uso della griglia CSS per centrare un elemento è un altro metodo efficace, che offre un controllo preciso sul layout e sull'allineamento.

Definisci un contenitore per il tuo layout e applica lo stile display: grid per attivare la griglia CSS. In questo caso il corpo funge da contenitore.
```
body {
  display: grid;
}
```
Utilizza le proprietà grid-template-columns e grid-template-rows per definire la struttura della tua griglia. Per la centratura sarà sufficiente una singola colonna e riga, quindi utilizza 1fr per entrambe.
```
body {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
```
Utilizza la proprietà place-items per centrare il contenuto della griglia, sia orizzontalmente che verticalmente.
```
body {
  place-items: center;
}
```
Modella lo sfondo del tuo elemento div per visualizzarlo al centro del contenitore della griglia.
```
div {
  background-color: blue;
}
```

In questo caso, una singola proprietà controlla il posizionamento centrale del div sulla tua pagina:

Utilizzo del posizionamento CSS per centrare un elemento div

Per utilizzare la proprietà position CSS per centrare un div, devi anche capire come funzionano le trasformazioni CSS con le transizioni. Ecco una guida passo passo con un esempio.

Per posizionare l'elemento div, assicurati che il suo contenitore abbia una posizione relativa. Ciò stabilisce un contesto di posizionamento relativo, quindi puoi posizionare il div al centro del suo contenitore.
```
body {
  position: relative;
}
```
Applica il posizionamento assoluto all'elemento div, quindi utilizza le proprietà top e left per posizionare l'angolo in alto a sinistra del div esattamente al centro del suo contenitore.
```
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 background-color: green;
}
```

Questo metodo funziona centrando prima l'angolo superiore dell'elemento, quindi spostandolo relativamente di metà della sua larghezza e di metà della sua altezza.

Flexbox, CSS Grid e posizionamento CSS sono strumenti potenti che puoi utilizzare per centrare gli elementi su una pagina web. Con Flexbox puoi centrare sia in orizzontale che in verticale con poche righe di codice. La griglia CSS fornisce un potente allineamento in due dimensioni e puoi utilizzare il posizionamento CSS per centrare un elemento rispetto al suo contenitore principale.