Flexbox

Lezione 5 di 9 del corso Come centrare un div o del testo usando CSS di Coddy.

Probabilmente il modo migliore per centrare un div è Flexbox (o qualsiasi altra cosa!)

Flexbox è un metodo responsivo e non richiede calcoli dei margini o della posizione.

Per usare flexbox, aggiungi display: flex; al div genitore: questo lo renderà un flexbox. Per centrare tutto ciò che si trova all'interno del genitore, usa align-items: center; e justify-content: center;

In totale,

#parent {
	display: flex;
	align-items: center;
	justify-content: center;
}

Nota: non è necessario aggiungere nulla al div figlio!

Sfida

Facile

Centra il div figlio usando flexbox.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="parent">
            <div id="child"/>
        </div>
    </body>
</html>

Tutte le lezioni di Come centrare un div o del testo usando CSS

1Introduzione

Che cos'è questo corso?

2Centrare un div

Margine automatico Posizionamento assoluto - Trasla Posizionamento assoluto - MargineFlexboxSfida di ripasso

3Centrare il testo

Allineamento del testo Flex Box Sfida finale

Esercitati da solo: Playground Web