Πώς να κεντράρετε οτιδήποτε με CSS - Ευθυγραμμίστε ένα Div, Text και άλλα

Το κεντράρισμα των πραγμάτων είναι μια από τις πιο δύσκολες πτυχές του CSS

Οι ίδιες οι μέθοδοι συνήθως δεν είναι δυσνόητες. Αντίθετα, οφείλεται περισσότερο στο γεγονός ότι υπάρχουν τόσοι πολλοί τρόποι να επικεντρωθούμε στα πράγματα.

Η μέθοδος που χρησιμοποιείτε μπορεί να διαφέρει ανάλογα με το στοιχείο HTML που προσπαθείτε να κεντράρετε ή αν το κεντράρετε οριζόντια ή κάθετα.

Σε αυτό το σεμινάριο, θα εξετάσουμε πώς να κεντράρουμε διαφορετικά στοιχεία οριζόντια, κάθετα, και κάθετα και οριζόντια.

Πώς να κεντράρετε οριζόντια

Το κεντράρισμα των στοιχείων οριζόντια είναι γενικά ευκολότερο από το κάθετο κεντράρισμα τους. Ακολουθούν ορισμένα κοινά στοιχεία που μπορεί να θέλετε να κεντράρετε οριζόντια και διαφορετικούς τρόπους για να το κάνετε.

Τρόπος κεντρικού κειμένου με το CSS Text-Align Center Properti

Για να κεντράρετε το κείμενο ή τους συνδέσμους οριζόντια, απλώς χρησιμοποιήστε την text-alignιδιότητα με την τιμή center:

Hello, (centered) World!

p { text-align: center; }

Πώς να κεντράρετε ένα Div με CSS Margin Auto

Χρησιμοποιήστε τη στενή marginιδιότητα με την τιμή 0 autoγια κεντράρισμα στοιχείων επιπέδου μπλοκ, όπως divοριζόντια:

.child { ... margin: 0 auto; }

Πώς να κεντράρετε ένα Div οριζόντια με το Flexbox

Το Flexbox είναι ο πιο σύγχρονος τρόπος για να κεντράρετε τα πράγματα στη σελίδα και καθιστά το σχεδιασμό αποκριτικών διατάξεων πολύ πιο εύκολο από ό, τι στο παρελθόν. Ωστόσο, δεν υποστηρίζεται πλήρως σε ορισμένα προγράμματα περιήγησης παλαιού τύπου, όπως ο Internet Explorer.

Για να κεντράρετε ένα στοιχείο οριζόντια με το Flexbox, απλώς εφαρμόστε display: flexκαι justify-content: centerστο γονικό στοιχείο:

.container { ... display: flex; justify-content: center; }

Πώς να κεντράρετε κάθετα

Το κεντράρισμα των στοιχείων κάθετα χωρίς σύγχρονες μεθόδους όπως το Flexbox μπορεί να είναι μια πραγματική δουλειά. Εδώ θα εξετάσουμε μερικές από τις παλαιότερες μεθόδους για να κεντράρουμε τα πράγματα κάθετα πρώτα και μετά θα σας δείξουμε πώς να το κάνετε με το Flexbox.

Πώς να κεντράρετε ένα Div κάθετα με CSS Absolute Positioning και Negative Margins

Για πολύ καιρό, αυτός ήταν ο τρόπος για να κεντράρετε τα πράγματα κάθετα. Για αυτήν τη μέθοδο πρέπει να γνωρίζετε το ύψος του στοιχείου που θέλετε να κεντράρετε.

Αρχικά, ορίστε την displayιδιότητα του γονικού στοιχείου σε relative.

Στη συνέχεια, για το στοιχείο παιδιού, που την displayιδιότητα να absoluteκαι topνα 50%:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

Αλλά αυτό είναι ακριβώς κάθετα στο κέντρο της άνω άκρης του παιδικού στοιχείου.

Για να κεντράρετε πραγματικά το θυγατρικό στοιχείο, ορίστε την margin-topιδιότητα σε -(half the child element's height):

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

Πώς να κεντράρετε ένα Div κάθετα με μετασχηματισμό και μετάφραση

Εάν δεν γνωρίζετε το ύψος του στοιχείου που θέλετε να κεντράρετε (ή ακόμα κι αν το κάνετε), αυτή η μέθοδος είναι ένα καλό κόλπο.

Αυτή η μέθοδος είναι πολύ παρόμοια με τη μέθοδο αρνητικών περιθωρίων παραπάνω. Ορίστε την displayιδιότητα του γονικού στοιχείου σε relative.

Για το θυγατρικό στοιχείο, ορίστε την displayιδιότητα absoluteκαι ορίστε topσε 50%. Τώρα αντί να χρησιμοποιήσετε ένα αρνητικό περιθώριο για να κεντράρετε πραγματικά το θυγατρικό στοιχείο, απλώς χρησιμοποιήστε transform: translate(0, -50%):

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

Σημειώστε ότι translate(0, -50%)είναι συντομογραφία για translateX(0)και translateY(-50%). Θα μπορούσατε επίσης να γράψετε transform: translateY(-50%)για να κεντράρετε το θυγατρικό στοιχείο κάθετα.

Πώς να κεντράρετε ένα Div κάθετα με το Flexbox

Όπως το κεντράρισμα των πραγμάτων οριζόντια, το Flexbox καθιστά εξαιρετικά εύκολο να κεντράρετε τα πράγματα κάθετα.

Για να κεντράρετε ένα στοιχείο κάθετα, εφαρμόστε display: flexκαι align-items: centerστο γονικό στοιχείο:

.container { ... display: flex; align-items: center; }

Πώς να κεντράρετε κάθετα και οριζόντια

Πώς να κεντράρετε ένα Div κάθετα και οριζόντια με CSS Absolute Positioning και Negative Margins

Αυτό μοιάζει πολύ με την παραπάνω μέθοδο για να κεντράρετε ένα στοιχείο κάθετα. Όπως την τελευταία φορά, πρέπει να γνωρίζετε το πλάτος και το ύψος του στοιχείου που θέλετε να κεντράρετε.

Ορίστε την displayιδιότητα του γονικού στοιχείου σε relative.

Στη συνέχεια, ρυθμίστε του παιδιού displayιδιοκτησίας absolute, topνα 50%, και leftνα 50%. Αυτό κεντράρει την επάνω αριστερή γωνία του παιδικού στοιχείου κάθετα και οριζόντια.

Για να κεντράρετε πραγματικά το θυγατρικό στοιχείο, εφαρμόστε ένα αρνητικό πάνω περιθώριο στο μισό ύψος του θυγατρικού στοιχείου και ένα αρνητικό αριστερό περιθώριο ορίστηκε στο μισό πλάτος του θυγατρικού στοιχείου:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

Πώς να κεντράρετε ένα Div κάθετα και οριζόντια με μετασχηματισμό και μετάφραση

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

.container { ... display: flex; justify-content: center; align-items: center; }

Αυτό είναι ό, τι πρέπει να γνωρίζετε για να επικεντρωθείτε στο καλύτερο από αυτά. Τώρα πηγαίνετε και κεντράρετε όλα τα πράγματα.