CSSте элементтерди борборго жайгаштыруунун ар кандай…

CSSте элементтерди борборлоо үчүн бир нече ыкмалар бар, алардын тандоосу контекстке жараша болот: элементтин түрү (сызыктык же блок), мазмунду эске алуу зарылчылыгы, документтин агымындагы жайгаштыруу жана адаптация талаптары.

Сызыктык элементтер үчүн: text-align: center; касиети ата-эне блокта колдонулат.
- Кайда колдонуу керек: Текстти, сүрөттөрдү же башка сызыктык же inline-block элементтерин блоктуу контейнер ичинде борборлоо керек болгондо.
- Мисал:
```
.container {
  text-align: center; /* Сызыктык элементтерди борборлоо */
}
```
Inline-block элементтери үчүн: Ошондой эле text-align: center; ылайыктуу.
- Кайда колдонуу керек: Ошол сызыктык элементдер сыяктуу, блокторду борборлоо керек болгондо, алар сызык катары жүргөн (мисалы, баскычтар, иконалар, display: inline-block; менен тизмелер).
Блок элементтери үчүн:
- margin: auto; менен: Бул ыкма тийиштүү элементке колдонулат. Анын кеңдигин белгилөө керек (width: auto; менен блок борборлоого болбойт).
  - Кайда колдонуу керек: Гамма жана кеңдик белгиленген блокторду горизонталдык борборлоо үчүн эң жөнөкөй жана кеңири колдонулган ыкма.
  - Мисал:
```
.centered-block {
  width: 50%; /* же белгиленген кеңдик, мисалы 300px */
  margin: 0 auto; /* Горизонталдык борборлоо */
}
```
- Flexbox менен: Бул горизонталдык жана вертикалдык борборлоого мүмкүндүк берет.
  - Кайда колдонуу керек: Контейнер ичинде элементтерди ийкемдүү жайгаштыруу жана бөлүштүрүү керек болгондо. Бир нече элементти борборлоо үчүн мыкты.
  - Мисал: (баланын ата-эне ортосунда борборлоо)
```
.container {
  display: flex;
  justify-content: center; /* горизонталдык борборлоо */
  align-items: center; /* вертикалдык борборлоо */
  height: 100vh; /* мисал, контейнердин бийиктигин белгилөө */
}
```
- Grid Layout менен: Бул дагы күчтүү мүмкүнчүлүктөрдү сунуштайт эки өлчөмдүү жайгаштыруу үчүн.
  - Кайда колдонуу керек: Көчмө жана татаал эки өлчөмдүү дизайндарда, же элементти тордун белгилүү бир уячесинде борборлоо керек болгондо.
  - Мисал: (тор уячесинде элементти борборлоо)
```
.container {
  display: grid;
  place-items: center; /* align-items жана justify-items кыскача */
  height: 100vh;
}
```
Вертикалдык борборлоо (кошумча ыкмалар блоктор үчүн):
- Абсолюттук позициялоо жана transform колдонуу: Элемент абсолюттук позицияга коюлуп, жогору жана сол жактан 50% жылдырылат, андан соң transform аркылуу өзүнүн туурасынын жана бийиктигинин жарымына түзөтүлөт. Ата-эне position: relative; болушу керек.
  - Кайда колдонуу керек: Башка элементтердин үстүнө жайгаштыруу же башка ыкмалар ылайыктуу болбогондо (мисалы, модалдык терезелер, чыгаруучу кеңешмелер). Элемент жөнөкөй агымдан чыгат.
  - Мисал:
```
.parent {
  position: relative; /* Баланын позициясы үчүн маанилүү */
  height: 200px; /* мисал */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* өзүнүн кеңдиги жана бийиктигинин 50% жылышы */
  width: 100px;
  height: 100px;
}
```
- line-height менен: Бул гана бир сап текстти борборлоо үчүн ылайыктуу. line-height блоктун бийиктигине барабар болушу керек.
  - Кайда колдонуу керек: Жөнөкөй учурларда, бир сап текстти вертикалдык жактан тууралоо керек болгондо (мисалы, баскычтарда же иконаларда жазуу менен).
  - Мисал:
```
.single-line {
  height: 50px;
  line-height: 50px; /* height менен бирдей болушу керек */
}
```
- Фантомдуу элемент жана vertical-align колдонуу: :before же :after псевдоэлементтерин display: inline-block; жана height: 100%; менен колдонуп, vertical-align: middle; менен борборлоо.
  - Кайда колдонуу керек: Практикада азыраак колдонулат, бирок белгилүү сценарийлерде пайдалуу болушу мүмкүн, эгер Flexbox же Grid жеткиликтүү эмес же колдонулбаса (мисалы, эски браузерлердин колдоосу үчүн).

Жыйынтык таблица:

Метод	Горизонталдык	Вертикалдык	Элемент түрү	Өзгөчөлүктөр
`text-align: center;`	Ооба	Жок	Сызыктык, Inline-block	Ата-эне элементте.
`margin: auto;`	Ооба	Жок	Блок, белгилүү кеңдик менен	Элементте. Жөнөкөй жана ишенимдүү.
Flexbox	Ооба	Ооба	Блок, Flex-элементтер	Икемдүү түзүү, бир же бир нече элементти борборлоо үчүн ылайыктуу.
Grid Layout	Ооба	Ооба	Grid-элементтер	Күчтүү, татаал эки өлчөмдүү дизайндар жана тор уячесинде борборлоо үчүн.
Абсолюттук позициялоо + `transform`	Ооба	Ооба	Ар бир элемент	Токтон чыгат. Катмарлаштыруу үчүн ылайыктуу.
`line-height`	Жок	Ооба	Бир сап текст	Бир гана сап үчүн, белгиленген бийиктик талап кылынат.
Фантомдуу элемент + `vertical-align`	Жок	Ооба	Төртүнчү элементтер	Аз колдонулат, бирок үйлесимдүүлүк үчүн пайдалуу болушу мүмкүн.

Тандоо конкреттүү тапшырмага жараша болот. Заманауи өнүгүүлөрдө, Flexbox жана Grid эң жакшы, алардын ийкемдүүлүгү жана эки багытта тең түзүү мүмкүнчүлүктөрү үчүн. margin: auto; уфуктык борборлоо үчүн стандарттык ыкма бойдон калууда. text-align: center; сызыктык элементтер үчүн колдонулат.

CSSте элементтерди борборго жайгаштыруунун ар кандай жолдору жана алардын ар бирин качан колдонуу жакшы?