В чём разница между свойствами justify-content: center, align-items: center и text-align: center?

Привет! Очень рад помочь тебе разобраться в этих CSS-свойствах. Все три свойства связаны с выравниванием, но работают в разных контекстах и на разных уровнях.

### 1. `justify-content: center`

Это свойство используется в контексте **Flexbox** (гибкие контейнеры). Оно отвечает за распределение пространства между элементами вдоль основной оси (в горизонтальном направлении, если направление (flex-direction) устанавливается по умолчанию).

- **Когда использовать**: Если у вас есть контейнер с установленным `display: flex;`, и вы хотите выровнять элементы внутри этого контейнера по горизонтали (по основной оси).
- **Пример**:
```css
.container {
    display: flex;
    justify-content: center;
}
```

### 2. `align-items: center`

Это также свойство Flexbox, но оно отвечает за выравнивание элементов вдоль поперечной оси, которая перпендикулярна основной оси (по вертикали, если направление по умолчанию).

- **Когда использовать**: Если у вас есть контейнер с установленным `display: flex;`, и вы хотите выровнять элементы внутри этого контейнера по вертикали.
- **Пример**:
```css
.container {
    display: flex;
    align-items: center;
}
```

### 3. `text-align: center`

Это свойство используется для выравнивания текста и встроенных элементов внутри блочного контейнера. Оно не зависит от Flexbox и применяется к блочным элементам (например, `<div>`, `<p>`, и т.д.).

- **Когда использовать**: Если вы хотите выровнять текст или встроенные элементы (например, изображение или кнопки) по центру внутри блочного элемента.
- **Пример**:
```css
.container {
    text-align: center;
}
```

### В каких ситуациях использовать:

- Используйте `justify-content: center` для горизонтального выравнивания элементов в Flexbox-контейнере.
- Используйте `align-items: center` для вертикального выравнивания элементов в Flexbox-контейнере.
- Используйте `text-align: center` для выравнивания текста или встроенных элементов внутри блочного контейнера.

### Пример использования всех трех свойств:

```html
<div class="outer-container">
    <div class="inner-container">
        <p class="text">Центрированный текст</p>
        <div class="flex-items">
            <div class="item">Элемент 1</div>
            <div class="item">Элемент 2</div>
        </div>
    </div>
</div>
```
```css
.outer-container {
    text-align: center; /* центрируем текст и встроенные элементы */
}

.inner-container {
    display: flex; 
    justify-content: center; /* центрируем элементы внутри flex-контейнера по горизонтали */
    align-items: center; /* центрируем элементы внутри flex-контейнера по вертикали */
}

.flex-items {
    display: flex; /* производим флекс-контейнер для элементов */
    /* justify-content и align-items уже применены к inner-container */
}
```

Надеюсь, это поможет вам лучше понять, как использовать эти свойства! Если у вас есть еще вопросы, не стесняйтесь задавать.