Πώς να κεντράρετε ένα Div στο CSS (Flexbox)
Δημιουργήστε μια διάταξη flexbox CSS οπτικά: flex-direction, justify-content, align-items, flex-wrap and gap στο κοντέινερ, καθώς και ανά παιδί flex-grow, flex-shrink και flex-base, όλα με ζωντανή προεπισκόπηση και CSS με δυνατότητα αντιγραφής.
Αποτέλεσμα
Ακολουθεί η άμεση απάντηση στην πιο συχνή ερώτηση στο CSS: για να κεντράρετε ένα div, βάλτε την οθόνη: flex, justify-content: κέντρο και align-items: κέντρο στο γονικό του. Αυτό είναι - τρεις δηλώσεις στο δοχείο και το παιδί κάθεται τέλεια στο κέντρο τόσο οριζόντια όσο και κάθετα μέσα σε αυτό, σε οποιοδήποτε μέγεθος. Αυτή η σελίδα ανοίγει τη γεννήτρια με αυτόν ακριβώς τον συνδυασμό που έχει ήδη εφαρμοστεί, επομένως η παρακάτω προεπισκόπηση δείχνει ότι λειτουργεί σε τρία αριθμημένα πλαίσια αυτήν τη στιγμή.
Πριν από το flexbox, το κεντράρισμα ενός div χρειαζόταν hacks: περιθώριο: 0 αυτόματα κεντραρισμένο μόνο οριζόντια και λειτουργούσε μόνο σε μπλοκ σταθερού πλάτους. κατακόρυφο κεντράρισμα σήμαινε θέση: απόλυτη με αρνητικά περιθώρια ή ένα τέχνασμα μετασχηματισμού, και τα δύο εύθραυστα τη στιγμή που το περιεχόμενο άλλαξε μέγεθος. Το justify-content χειρίζεται τον κύριο άξονα και το align-item χειρίζεται τον εγκάρσιο άξονα — μαζί κεντράρουν και προς τις δύο κατευθύνσεις, ανεξάρτητα από το ύψος ή το πλάτος του παιδιού, γι' αυτό ακριβώς αυτό το ζευγάρι έγινε η τυπική απάντηση.
Σύρετε οποιοδήποτε στοιχείο ελέγχου παρακάτω και παρακολουθήστε τα τρία πλαίσια προεπισκόπησης να παραμένουν στο κέντρο καθώς το κοντέινερ αλλάζει σχήμα ή να προσθέσετε ένα κενό μεταξύ τους. Όταν φαίνεται σωστό, αντιγράψτε το μπλοκ CSS στο κάτω μέρος κατευθείαν στο φύλλο στυλ σας — εκτελείται με τον ίδιο τρόπο σε κάθε σύγχρονο πρόγραμμα περιήγησης, χωρίς να χρειάζεται βιβλιοθήκη.