Aké sú rôzne spôsoby centrovania prvkov v CSS a kedy…

Pre centrovania prvkov v CSS-u je mogoče uporabiti več pristopov, katerih izbira je odvisna od konteksta: vrste elementa (vrstični vs blok), potrebe po upoštevanju vsebine, razporeditve v toku dokumenta in zahtevane prilagodljivosti.

Za vrstične elemente: Uporablja se lastnost text-align: center; na starševskem bloku.
- Kdaj uporabiti: Ko je potrebno centrirati besedilo, slike ali druge vrstične ali inline-block elemente znotraj blokovskega vsebnika.
- Primer:
```
.container {
  text-align: center; /* Centriranje vrstičnih elementov znotraj */
}
```
Za inline-block elemente: Prav tako je primerno text-align: center; na starševskem bloku.
- Kdaj uporabiti: Podobno vrstičnim elementom, ko je potrebno centrirati bloke, ki se obnašajo kot vrstice (npr. gumbe, ikone, sezname z display: inline-block;).
Za blok elemente:
- Z margin: auto;: Uporablja se na samem bloku. Zahteva določitev širine elementa (ne moremo centrirati bloka z width: auto; s tem načinom).
  - Kdaj uporabiti: Najpreprostejši in najpogosteje uporabljeni način za horizontalno centriranje blok elementov z določeno ali največjo širino znotraj njihovih starševskih vsebnikov.
  - Primer:
```
.centered-block {
  width: 50%; /* Ali fiksna širina, npr. 300px */
  margin: 0 auto; /* Horizontalno centriranje */
}
```
- Z Flexbox-om: Omogoča horizontalno in vertikalno centriranje.
  - Kdaj uporabiti: Pri delu z razporeditvami, kjer je potrebno prilagodljivo poravnavanje in razporejanje elementov znotraj vsebnika. Odlično za centriranje enega ali več elementov.
  - Primer: (Centriranje otroka v sredini starševskega)
```
.container {
  display: flex;
  justify-content: center; /* Horizontalno centriranje */
  align-items: center; /* Vertikalno centriranje */
  height: 100vh; /* Primer, določimo višino vsebnika */
}
```
- Z Grid Layout-om: Prav tako ponuja zmogljive možnosti za poravnavo v dveh dimenzijah.
  - Kdaj uporabiti: Za bolj kompleksne dvodimenzionalne razporeditve ali ko je potrebno centrirati element v določeni celici mreže.
  - Primer: (Centriranje elementa v celici mreže)
```
.container {
  display: grid;
  place-items: center; /* Skrajšava za align-items in justify-items */
  height: 100vh;
}
```
Vertikalno centriranje (dodatne metode za blok elemente):
- Z absolutnim pozicioniranjem in transformacijo: Element se pozicionira absolutno, premakne za 50% od zgornjega in 50% od levega roba staršev, nato se korektira na polovico svoje širine in višine s pomočjo transform. Zahteva position: relative; pri staršu.
  - Kdaj uporabiti: Za prekrivanje elementa čez drugega, ali kadar druge metode niso primerne zaradi specifičnosti toka dokumenta (npr. modalni okni, pojavljajoče se napotke). Element se izvleče iz običajnega toka.
  - Primer:
```
.parent {
  position: relative; /* Pomembno za pozicioniranje otroka */
  height: 200px; /* Primer */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Premik za 50% svoje širine in višine */
  width: 100px;
  height: 100px;
}
```
- Z line-height: Primeren le za centriranje enega samega vrstice besedila v bloku. line-height bloka mora biti enak njegovi višini.
  - Kdaj uporabiti: Za preproste primere, ko je potrebno poravnati eno vrstico besedila vertikalno v elementu fiksne višine (npr. v gumbih ali ikonah z napisom).
  - Primer:
```
.single-line {
  height: 50px;
  line-height: 50px; /* Mora biti enako height */
}
```
- Z uporabo fantomskega elementa in vertical-align: Uporaba pseudoelementov :before ali :after z display: inline-block; in height: 100%; skupaj z vertical-align: middle; za centrirani element.
  - Kdaj uporabiti: Redkeje se uporablja v praksi, vendar je lahko koristen v določenih specifičnih scenarijih, ko Flexbox ali Grid niso dostopni ali primerni (npr. podpora starejšim brskalnikom).

Pregledna tabela:

Metoda	Horizontalno	Vertikalno	Tip elementa	Značilnosti
`text-align: center;`	Da	Ne	Vrstični, Inline-block	Na starševskem elementu.
`margin: auto;`	Da	Ne	Blok elementi z določeno širino	Na samem elementu. Preprost in zanesljiv.
Flexbox	Da	Da	Blok, Flex-elementi	Fleksibilno poravnanje, primerno za eno os ali centriranje enega.
Grid Layout	Da	Da	Grid elementi	Močno, primerno za kompleksne dvodimenzionalne razporeditve, centriranje v celici mreže.
Absolutno pozicioniranje + `transform`	Da	Da	Bilo kateri	Izvleče iz toka. Primerno za prekrivanja.
`line-height`	Ne	Da	Vrstični tekst	Le za eno vrstico besedila, zahteva fiksno višino.
Fantomski element + `vertical-align`	Ne	Da	Razni	Manj pogost, lahko uporabno za kompatibilnost.

Izbira metode je odvisna od specifičnega primera. V sodobnem razvoju so Flexbox in Grid najbolj priporočljivi za centriranje blok elementov zaradi njihove prilagodljivosti in možnosti poravnave v obeh smereh. margin: auto; ostaja standard za horizontalno centriranje blok elementov. text-align: center; se uporablja za vrstične elemente.

Aké sú rôzne spôsoby centrovania prvkov v CSS a kedy je lepšie použiť každý z nich?