Κάθετο κεντράρισμα στο CSS

Το CSS εξακολουθεί να προκαλεί σύγχυση για τους περισσότερους από εμάς: έχει εκατοντάδες ιδιότητες με κακή ονομασία, καθεμία από τις οποίες μπορεί να επηρεάσει το αποτέλεσμα με μη διαισθητικούς τρόπους. Η κατακόρυφη τοποθέτηση στοιχείων στην ανάπτυξη Ιστού είναι δύσκολη και έχει προκαλέσει συχνά πονοκεφάλους στο παρελθόν. Αλλά ευτυχώς αυτές οι μέρες πέρασαν.


Είναι δύσκολο να πιστέψει κανείς: Το 2024 θα είναι πλέον δυνατό να επιτευχθεί το επιθυμητό αποτέλεσμα με μία γραμμή CSS:

0f1273b25d9806459716

0f1273b25d9806459716

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

Flexbox

0f1273b25d9806459716

Απόλυτη τοποθέτηση

0f1273b25d9806459716

Ενσωματωμένο μπλοκ

0f1273b25d9806459716

Ο Υποστήριξη προγράμματος περιήγησης για ευθυγράμμιση περιεχομένου είναι πλέον πολύ καλό και δεν υπάρχει πλέον ένα καλό επιχείρημα για τη χρήση ξεπερασμένων τεχνικών. Για αυτήν την εργασία, δεν χρειάζεστε πλέον ένα flexbox και το στοιχείο child (σε αντίθεση με το παραπάνω παράδειγμα) δεν χρειάζεται να βρίσκεται σε ξεχωριστό `<body>`. div να συμπεριληφθεί. Είναι εκπληκτικό ότι μετά από δεκαετίες προόδου, το CSS έχει μόνο τώρα μια ενιαία ιδιότητα για τον έλεγχο του κάθετου κεντραρίσματος.

Πίσω