Kuo skiriasi skirtingi būdai elementų centravimui…

Yra daugybė būdų centrinti elementus. Pagrindiniai skirtumai yra tai, ką tiksliai centrinti (eilutės, blokinis elementas, tekstas), pagal ką centrinti (tėvą, viewport) ir kokias technologijas naudoti (CSS, JavaScript):

Eilutės turinio (teksto, span, a, img ir kt.) horizontali centracija:

text-align: center; taikoma tėvų elementui:

.parent {
  text-align: center; /* Centruoja eilutės ir inline-blokinius palikuonis */
}

Blokinio elemento horizontali centracija:

Naudojant margin: auto; ir nustatytą plotį:

.element {
  width: 50%; /* Nustatome plotį */
  margin: 0 auto; /* Automatiniai horizontiniai kraštai centrina elementą */
}

Dviejų matmenų (aukščio ir pločio) centravimas blokiniam elementui:

Flexbox: lankstus ir galingas būdas:

.parent {
  display: flex;
  justify-content: center; /* Horizontali centracija */
  align-items: center; /* Vertikali centracija */
  height: 100vh; /* Pavyzdys: centravimas pagal viewport aukštį */
}

Grid: tinka sudėtingesniems maketams:

.parent {
  display: grid;
  place-items: center; /* trumpinys align-items ir justify-items */
  height: 100vh;
}

Positioning ir Transform: tinka elementui centrinti pagal jo tėvą, net jei tėvas turi ribotus matmenis:

.parent {
  position: relative; /* Tėvas turi būti pozicionuotas */
}

.element {
  position: absolute; /* Elementas pozicionuojamas absoliučiai */
  top: 50%; /* Perkelia viršutinį kraštą į 50% aukščio */
  left: 50%; /* Perkelia kairįjį kraštą į 50% pločio */
  transform: translate(-50%, -50%); /* Perkelia elementą atgal į jo centrą */
}

Margin auto su absoliučiu pozicionavimu: Reikalauja nustatyti elemento dydį:

.parent {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; /* Automatiniai kraštai centrina */
  width: 200px; /* Reikalingi matmenys */
  height: 100px;
}

Lyginamoji dviejų matmenų centravimo metodų lentelė:

Metodas	Aprašymas	Privalumai	Trūkumai
Flexbox	display: flex, justify-content, align-items naudojimas	Lankstus, prisitaikantis, tinka vienpusiams elementams	Gali būti perteklinis labai paprastiems atvejams
Grid	display: grid, place-items naudojimas	Galingas, tinka sudėtingiems daugiamačiams maketams	Daug sintaksės, nei Flexbox, paprastam centravimui
Positioning + Transform	absoliutus pozicionavimas ir transform naudojimas	Veikia net ir nežinomų dydžių elementams	Reikalauja pozicionuoto tėvo
Margin Auto + Absolute Pos.	position: absolute ir margin: auto naudojimas	Paprasta su griežtai nustatytais dydžiais elementams	Reikalauja nustatyti dydį, mažiau lanksti

Pasirinkimas priklauso nuo konteksto, elemento tipo, tėvų konteinerio ir reikalaujamos prisitaikymo. Flexbox ir Grid yra moderniausi ir pageidautini daugeliu atvejų dviejų matmenų centravimui.

Kuo skiriasi skirtingi būdai elementų centravimui interneto puslapyje?