Πώς να κεντράρετε οτιδήποτε με 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; }

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