Μπορείς να δώσεις ένα παράδειγμα για το πώς να κεντράρεις ένα στοιχείο div στη σελίδα χρησιμοποιώντας CSS;

Για να κεντράρετε ένα στοιχείο <div> στη σελίδα χρησιμοποιώντας CSS, υπάρχουν διάφοροι τρόποι. Ένας από τους πιο απλούς και ευέλικτους είναι η χρήση του Flexbox:

body, html {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  justify-content: center; /* οριζόντια */
  align-items: center;    /* κάθετα */
  height: 100vh;          /* ύψος του κοντέινερ - όλη η οθόνη */
}

.centered-div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

Και στο HTML:

<div class="container">
  <div class="centered-div">Κεντραρισμένο μπλοκ</div>
</div>

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

Ένας άλλος τρόπος είναι η χρήση απόλυτης τοποθέτησης με μετασχηματισμό:

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: lightcoral;
}

Αυτή η μέθοδος επίσης κεντράρει το στοιχείο σε σχέση με το παράθυρο του προγράμματος περιήγησης.