Come centrare verticalmente un elemento div per tutti i browser usando CSS

Nello sviluppo web, è fondamentale creare correttamente il layout dell'elemento. Tuttavia, molte proprietà CSS, come la scatola flessibile CSS3, sono utili per regolare il layout di pagine Web e elementi HTML. La scatola flessibile viene utilizzata per organizzare pagine Web e applicazioni in modo ricorsivo. Questa modalità Flexbox aiuta a creare layout per pagine Web e applicazioni complesse.

Questo post ti guiderà su come centrare un elemento div per tutti i browser usando CSS in verticale.

Come allineare l'elemento div usando CSS?

L'elemento Div può essere allineato verticalmente utilizzando la proprietà del display "flettere"Insieme al CSS"allineare"Proprietà e"giustificare il contenuto" proprietà. La proprietà "align-eleds" allinea l'elemento in verticale e la proprietà "giustificata" allinea il contenuto in orizzontale.

Esempio: come centrare verticalmente un elemento div con CSS?

In HTML, prima, aggiungi un “"Elemento e assegnarlo la classe"contenuto principale". Tra i tag "", aggiungi un ""Elemento con i seguenti attributi:

• "src"L'attributo viene utilizzato per specificare l'URL dell'immagine.
• "Al"L'attributo definisce un po 'di testo che verrà visualizzato al posto di un'immagine se non riesce a caricare.
• "larghezza"L'attributo viene utilizzato per regolare la larghezza dell'immagine.
• Quindi, aggiungi il "

  "Elemento per incorporare il paragrafo alla pagina.

Ecco il codice HTML:

Il laptop è un computer portatile noto anche come taccuino.

In CSS, specificheremo diverse proprietà di styling al div.

Classe di "contenuto principale" di stile

.contenuto principale
Altezza: 50%;
Background-color: #46c2cb;
Font-size: 24px;
imbottitura: 10px;

Le seguenti proprietà CSS sono definite in "contenuto principale" classe:

• "altezza"La proprietà viene utilizzata per regolare l'altezza del contenitore.
• "colore di sfondo"Definisce il colore di sfondo dell'elemento.
• "dimensione del font"Specifica la dimensione del carattere dell'elemento.
• "imbottitura"La proprietà imposta spazio attorno al contenuto dell'elemento.

Dall'output, è possibile osservare che il contenuto dell'elemento Div non è al centro:

Andiamo avanti per applicare le proprietà CSS che aiutano a centrare il ""Elemento verticalmente. Aggiungi queste proprietà alla classe "contenuto principale"Che vengono utilizzati per accedere all'elemento:

display: flex;
ALIGE-ITMS: CENTRO;

Ecco la descrizione:

• "Schermo" proprietà "flettere"Viene utilizzato per rendere il layout Div flessibile al suo elemento.
• "allineare"La proprietà CSS è impostata come"centro", Che allineerà verticalmente gli elementi Div.

Produzione

Hai imparato a centrare un elemento div in verticale per tutti i browser usando CSS.

Conclusione

Per centrare verticalmente un elemento div, il CSS "SchermoLa proprietà "viene utilizzata con il"flettere" valore. Questo valore rende il contenitore flessibile ai suoi elementi. Per allineare verticalmente l'elemento Div, regola il "allineare"Proprietà e assegnargli un"centro" valore. Questo blog ti ha mostrato come utilizzare CSS per centrare verticalmente gli elementi div in tutti i browser.