Kokie yra skirtingi būdai centruoti elementus CSS ir…

CSS'e elementų centravimas gali būti pasiekiamas keliomis metodikomis, kurios pasirinkimas priklauso nuo konteksto: elemento tipo (inline ar blokinis), poreikio atsižvelgti į turinį, dokumento srauto išdėstymo ir adaptacijos poreikio.

Inline elementams: naudojamas text-align: center; tėvinėje blokinėje elemente.
- Kada naudoti: kai norite centruoti tekstą, paveikslėlius ar kitus inline ar inline-block elementus viduje blokinio konteinerio.
- Pavyzdys:
```
.container {
  text-align: center; /* centruoja inline elementus */
}
```
Inline-block elementams: taip pat tinka text-align: center; tėvinėje blokinėje elemente.
- Kada naudoti: panašiai kaip inline elementams, kai reikia centruoti blokus, kurie elgiasi kaip eilutės (pvz., mygtukai, piktogramos, sąrašai su display: inline-block;).
Blokiniams elementams:
- Naudojant margin: auto;: taikoma pačiam blokiniam elementui. Reikalauja nurodyti elemento plotį (negali būti width: auto; šiuo būdu centruoti).
  - Kada naudoti: paprasčiausias ir dažniausiai naudojamas būdas horizontaliai centruoti fiksuoto ar maksimalaus pločio blokinius elementus jų tėvų konteineryje.
  - Pavyzdys:
```
.centered-block {
  width: 50%; /* arba fiksuotas plotis, pvz., 300px */
  margin: 0 auto; /* horizontaliai centruoja */
}
```
- Naudojant Flexbox: leidžia tiek horizontaliai, tiek vertikaliai centruoti.
  - Kada naudoti: kai dirbate su maketais, kuriuose reikia lankstaus elementų išlyginimo ir paskirstymo konteineryje. Puikiai tinka vieno ar kelių elementų centravimui.
  - Pavyzdys: (centravimas vaiko elemento viduryje tėvo)
```
.container {
  display: flex;
  justify-content: center; /* horizontaliai centruoja */
  align-items: center; /* vertikaliai centruoja */
  height: 100vh; /* pavyzdys, konteinerio aukštis */
}
```
- Grid Layout: taip pat siūlo galingas galimybes dviejų matmenų išdėstymui.
  - Kada naudoti: sudėtingesniems dviejų matmenų maketams arba kai reikia centruoti elementą tam tikroje tinklelio langelyje.
  - Pavyzdys: (elemento centravimas tinklelio langelyje)
```
.container {
  display: grid;
  place-items: center; /* trumpinys align-items ir justify-items */
  height: 100vh;
}
```
Vertikalus centravimas (papildomi metodai blokiniams elementams):
- Naudojant absoliutų pozicionavimą ir transform: elementas pozicionuojamas absoliučiai, perkeliamas 50% nuo viršaus ir 50% nuo kairės tėvo krašto, tada koreguojamas perpus savo pločio ir aukščio transform pagalba. Reikalauja position: relative; tėvui.
  - Kada naudoti: kai norite sluoksniuoti elementą virš kito arba kai kiti metodai netinka dėl dokumento srauto ypatybių (pvz., modaliniai langai, iššokantys patarimai). Elementas išsiveržia iš įprasto srauto.
  - Pavyzdys:
```
.parent {
  position: relative; /* svarbu pozicionuojant vaiką */
  height: 200px; /* pavyzdys */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* perkelia per pusę savo pločio ir aukščio */
  width: 100px;
  height: 100px;
}
```
- Naudojant line-height: tinka tik vienos eilutės teksto centravimui. line-height turi būti lygus elemento aukščiui.
  - Kada naudoti: paprastiems atvejams, kai reikia vertikaliai išlyginti vienos eilutės tekstą fiksuoto aukščio elemente (pvz., mygtukuose ar piktogramose su užrašu).
  - Pavyzdys:
```
.single-line {
  height: 50px;
  line-height: 50px; /* turi būti lygus height */
}
```
- Naudojant fanto elementą ir vertical-align: naudojama pseudoelemento :before arba :after su display: inline-block; ir height: 100%; kartu su vertical-align: middle; centravimui.
  - Kada naudoti: rečiau praktikoje, bet gali būti naudinga tam tikrose specifinėse situacijose, kai Flexbox ar Grid nėra prieinami arba netinkami (pvz., senesnių naršyklių palaikymui).

Santrauka:

Metodas	Horizontaliai	Vertikaliai	Elemento tipas	Ypatybės
`text-align: center;`	Taip	Ne	Inline, inline-block	Tėvinėje.
`margin: auto;`	Taip	Ne	Blokas (su plotimi)	Pačiam elementui. Paprasta ir patikima.
Flexbox	Taip	Taip	Blokas, Flex elementai	Lanksti išlyginimas, gerai tinka vienos ašies arba vieno elemento centravimui.
Grid Layout	Taip	Taip	Grid elementai	Galingas, tinka sudėtingiems dviejų matmenų maketams, centravimui langelyje.
Absoliutus pozicionavimas + `transform`	Taip	Taip	Bet kuris	Išsiveržia iš srauto. Tinka sluoksniavimui.
`line-height`	Ne	Taip	Vienos eilutės tekstas	Tik vienos eilutės tekstui, reikalauja fiksuoto aukščio.
Fanto elementas + `vertical-align`	Ne	Taip	Skirtingi	Mažiau paplitęs, gali būti naudingas suderinamumui.

Metodą pasirinkti priklauso nuo konkrečios užduoties. Šiuolaikinėje kūrimo praktikoje, Flexbox ir Grid yra labiausiai pageidaujami centravimui dėl jų lankstumo ir galimybių išlygiuoti abiem kryptimis. margin: auto; lieka standartu horizontaliam centravimui. text-align: center; naudojamas inline elementams.

Kokie yra skirtingi būdai centruoti elementus CSS ir kada geriausia naudoti kiekvieną iš jų?