Как расположить текст по центру родителя?

Способы центрирования текста в CSS

Центрирование текста - одна из базовых операций в CSS верстке. Существует несколько подходов в зависимости от контекста и требований. Каждый метод имеет свои преимущества и ограничения.

1. Горизонтальное центрирование (inline текст)

// text-align для горизонтального центрирования
const centered = `
  text-align: center;
  /* центрирует inline и inline-block элементы */
`;

// HTML
<div class="container">
  <p>Centered text</p>
  <span>Also centered</span>
</div>

// CSS
.container {
  text-align: center;
}

Это самый простой способ для текста и inline элементов. Работает везде, включая старые браузеры.

2. Вертикальное центрирование (line-height)

// Использование line-height для одной строки
const singleLine = `
  height: 100px;
  line-height: 100px;
  /* текст центрирован вертикально */
`;

// HTML
<div class="button-like">Click Me</div>

// CSS
.button-like {
  height: 100px;
  line-height: 100px;
  text-align: center; /* горизонтально */
}

Этот метод работает только для одной строки текста.

3. Flexbox (модерный подход)

// Flexbox центрирует элемент по обеим осям
const flexCenter = `
  display: flex;
  justify-content: center;  /* горизонтально */
  align-items: center;      /* вертикально */
  height: 200px;            /* нужна высота контейнера */
`;

// HTML
<div class="flex-container">
  <p>Centered text</p>
</div>

// CSS
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background: lightblue;
}

Это рекомендуемый способ в современных проектах. Работает с текстом и элементами любого размера.

4. Grid (альтернатива flexbox)

// CSS Grid тоже может центрировать
const gridCenter = `
  display: grid;
  place-items: center;
  /* эквивалент:
     justify-items: center;
     align-items: center;
  */
  height: 200px;
`;

// HTML
<div class="grid-container">
  <p>Centered text</p>
</div>

// CSS
.grid-container {
  display: grid;
  place-items: center;
  height: 200px;
  background: lightgreen;
}

Grid часто более многословный, но дает больше контроля когда нужна сетка.

5. Абсолютное позиционирование

// Старый способ, но все еще актуален
const absoluteCenter = `
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* центрирует от точки top-left */
`;

// HTML
<div class="parent">
  <div class="child">Centered</div>
</div>

// CSS
.parent {
  position: relative;
  height: 200px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Этот метод требует position: relative на родителе и работает с элементами фиксированного размера.

6. Практические примеры

// Пример 1: Кнопка с иконой и текстом
const button = `
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
`;

// Пример 2: Модальное окно по центру экрана
const modal = `
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
`;

// Пример 3: Множественное содержимое
const container = `
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
`;

7. С многострочным текстом

// Текст в блоке
const multilineText = `
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center; /* дополнительное центрирование внутри */
`;

// HTML
<div class="text-box">
  <p>This is a long text that spans multiple lines. It will be centered both horizontally and vertically.</p>
</div>

// CSS
.text-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  padding: 20px;
  text-align: center;
}

8. Tailwind классы

// Tailwind делает центрирование очень простым

// Горизонтально
className="text-center"

// Flex центрирование
className="flex items-center justify-center"

// Grid центрирование
className="grid place-items-center"

// С высотой
className="flex items-center justify-center h-48"

// Полный экран
className="flex items-center justify-center h-screen w-screen"

9. Сравнение методов

// FLEXBOX - рекомендуется
Преимущества:
- Простой и читаемый код
- Работает с элементами любого размера
- Контролирует направление (row/column)
- Современный стандарт

Недостатки:
- Не работает в IE9 и ниже

// GRID
Преимущества:
- Очень компактно (place-items: center)
- Хороший выбор если уже используется grid

Недостатки:
- Более новый стандарт
- Излишний для простого центрирования

// ABSOLUTE POSITIONING
Преимущества:
- Работает везде
- Полезно для позиционирования относительно окна

Недостатки:
- Требует position: relative на родителе
- Требует знание размера элемента
- Выводит из normal flow

// TEXT-ALIGN
Преимущества:
- Самый старый способ
- Работает везде
- Простой для текста

Недостатки:
- Работает только для inline элементов
- Не центрирует вертикально

10. Реальный пример: Hero секция

// HTML
<section class="hero">
  <h1>Welcome to My Site</h1>
  <p>Centered hero section</p>
</section>

// CSS
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero h1 {
  font-size: 4rem;
  color: white;
  margin: 0;
}

.hero p {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 16px 0 0 0;
  max-width: 600px;
}

Ключевые выводы

1. Используй Flexbox - это современный и универсальный способ
2. text-align: center - для горизонтального центрирования текста
3. display: flex + justify-content + align-items - для полного центрирования
4. place-items: center в Grid - компактная альтернатива
5. Absolute positioning - когда нужно позиционировать относительно окна
6. text-align: center внутри flex - помогает с многострочным текстом

Для 95% случаев Flexbox это правильный выбор. Остальные методы используются для специфических сценариев.