Millised on erinevad viisid elementide CSS-is…

CSS-is elementide tsentreerimiseks saab kasutada mitmeid lähenemisviise, mille valik sõltub kontekstist: elemendi tüübist (rida vs blokk), vajadusest arvestada sisu, dokumendi voolu paigutusest ja kohandatavusest.

Ridadelementide jaoks: kasutatakse text-align: center; vanemblokil.
- Millal kasutada: kui soovite tsentreerida teksti, pilte või muid inline või inline-block elemente sisemuses.
- Näide:
```
.container {
  text-align: center; /* tsentreerib inline elemendid */
}
```
Inline-block elementide jaoks: sobib samuti text-align: center; vanembloki puhul.
- Millal kasutada: sarnaselt inline elementidele, kui soovite tsentreerida blokke, mis käituvad nagu read (näiteks nupud, ikoonid, loendid display: inline-block;).
Blokielementide jaoks:
- margin: auto; kasutamine: rakendub otse blokielemendile. Nõuab elemendi laiuse määramist (ei saa tsentreerida width: auto;-ga sel viisil).
  - Millal kasutada: kõige lihtsam ja levinum viis horisontaalseks tsentreerimiseks fikseeritud või maksimaalse laiusega blokielemendid nende vanemkonteineris.
  - Näide:
```
.centered-block {
  width: 50%; /* või fikseeritud laius, näiteks 300px */
  margin: 0 auto; /* horisontaalne tsentreerimine */
}
```
- Flexboxi kasutamine: võimaldab nii horisontaalset kui ka vertikaalset tsentreerimist.
  - Millal kasutada: kui töötate paigutustega, kus on vaja paindlikult joondada ja jaotada elemente konteineris. Sobib suurepäraselt ühe või mitme elemendi tsentreerimiseks.
  - Näide: (lapse elemendi tsentreerimine vanema keskpunktis)
```
.container {
  display: flex;
  justify-content: center; /* horisontaalne tsentreerimine */
  align-items: center; /* vertikaalne tsentreerimine */
  height: 100vh; /* näide, konteineri kõrgus */
}
```
- Grid Layout: pakub samuti võimsaid võimalusi kahe mõõtmega paigutamiseks.
  - Millal kasutada: keerulisemate kahe mõõtmega paigutuste või kui vaja tsentreerida element kindlas võrgusõlmes.
  - Näide: (elemendi tsentreerimine võrgusõlmes)
```
.container {
  display: grid;
  place-items: center; /* lühend `align-items` ja `justify-items` jaoks */
  height: 100vh;
}
```
Vertikaalne tsentreerimine (lisameetodid blokielementidele):
- Absoluutpositsioneerimise ja transform kasutamine: element positsioneerub absoluutseks, nihkub 50% üles ja 50% vasakule vanemast, seejärel korrigeeritakse oma laiuse ja kõrguse poole transform-iga. Vajab position: relative; vanemal.
  - Millal kasutada: kui soovite elementi teise peale asetada või kui teised meetodid ei sobi dokumendi voolu spetsiifika tõttu (näiteks modaalaknad, hüppavad vihjed). Element väljub tavapärasest voost.
  - Näide:
```
.parent {
  position: relative; /* oluline lapse positsioneerimisel */
  height: 200px; /* näide */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* nihutab poole oma laiuse ja kõrguse võrra */
  width: 100px;
  height: 100px;
}
```
- line-height-i kasutamine: sobib ainult ühe rea teksti vertikaalseks tsentreerimiseks. line-height peab olema võrdne elemendi kõrgusega.
  - Millal kasutada: lihtsatel juhtudel, kui vaja joondada ühe rea teksti vertikaalselt fikseeritud kõrgusega elemendis (näiteks nuppudes või ikoonides koos märgisega).
  - Näide:
```
.single-line {
  height: 50px;
  line-height: 50px; /* peab kattuma height-iga */
}
```
- Fantomelemendi ja vertical-align kasutamine: kasutab pseudoelementi :before või :after koos display: inline-block; ja height: 100%; ning vertical-align: middle; tsentreerimiseks.
  - Millal kasutada: harvem praktikas, kuid võib olla kasulik teatud spetsiifilistes olukordades, kui Flexbox või Grid ei ole saadaval või ei sobi (näiteks vanemate brauserite toetamiseks).

Kokkuvõte:

Meetod	Horisontaalne	Vertikaalne	Elemendi tüüp	Eripärad
`text-align: center;`	Jah	Ei	Inline, inline-block	Vanemal.
`margin: auto;`	Jah	Ei	Blokk (laiusega)	Otse elemendil. Lihtne ja usaldusväärne.
Flexbox	Jah	Jah	Blokk, Flex elemendid	Paindlik joondus, sobib hästi ühe või mitme elemendi tsentreerimiseks.
Grid Layout	Jah	Jah	Grid elemendid	Võimas, sobib keerukamate kahe mõõtmega paigutuste ja tsentreerimise jaoks.
Absoluutpositsioon + `transform`	Jah	Jah	Kõik	Väljub voost. Sobib kihistamiseks.
`line-height`	Ei	Jah	Ühe rea tekst	Ainult ühe rea tekstile, nõuab fikseeritud kõrgust.
Pseudoelement + `vertical-align`	Ei	Jah	Erinevad	Vähem levinud, võib olla kasulik sarnaste olukordade jaoks.

Meetodi valik sõltub konkreetsest ülesandest. Tänapäevases arenduses on Flexbox ja Grid kõige eelistatumad nende paindlikkuse ja kahepoolse joondamise võimaluste tõttu. margin: auto; jääb standardiks horisontaalseks tsentreerimiseks. text-align: center; kasutatakse inline elementidele.

Millised on erinevad viisid elementide CSS-is keskendumiseks ja millal on parem igaüht neist kasutada?