Σε αυτό το άρθρο, θα σας δείξω πώς να κεντράρετε ένα αντικείμενο είτε κάθετα είτε οριζόντια –ή και τα δύο– container.

Παράδειγμα κώδικα

Για να κεντράρετε ένα στοιχείο οριζόντια:

element {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

Για να κεντράρετε ένα στοιχείο κατακόρυφα:

element {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

Για να κεντράρετε ένα στοιχείο τόσο κατακόρυφα όσο και οριζόντια:

element {
position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  }

Πώς λειτουργεί η απόλυτη θέση;
Από προεπιλογή, τα στοιχεία έχουν μια static θέση εκτός εάν ορίζεται διαφορετικά ως absolute, fixed, relativeή sticky.