Можно ли центрировать div без текста внутри через text-align?

text-align для пустых div

Нет, text-align: center не работает для центрирования самого пустого блока. Это свойство центрирует содержимое (текст) внутри элемента, а не сам элемент.

Почему text-align не работает

// ПЛОХО: text-align центрирует только содержимое
<div style="text-align: center; width: 200px; height: 200px; border: 1px solid red;"></div>
// Div остаётся слева, так как центрировать нечего (нет содержимого)

// Но это работает:
<div style="text-align: center; width: 200px; border: 1px solid red;">
  Hello World
</div>
// Текст центрирован по горизонтали

Правильные способы центрирования

1. Flexbox (самый универсальный)

// Контейнер с flex
<div style={{
  display: 'flex',
  justifyContent: 'center',  // По горизонтали
  alignItems: 'center',      // По вертикали
  width: '200px',
  height: '200px',
  border: '1px solid red'
}}>
</div>

// React компонент
export function CenteredBox() {
  return (
    <div className="flex justify-center items-center w-52 h-52 border border-red-500">
      {/* Содержимое центрировано */}
    </div>
  );
}

2. Grid

<div style={{
  display: 'grid',
  placeItems: 'center',  // Центрирует и по X, и по Y
  width: '200px',
  height: '200px',
  border: '1px solid red'
}}>
</div>

// Или явно
<div style={{
  display: 'grid',
  justifyContent: 'center',
  alignContent: 'center',
  width: '200px',
  height: '200px'
}}>
</div>

3. Absolute positioning (старый способ)

// Контейнер должен быть relative
<div style={{
  position: 'relative',
  width: '200px',
  height: '200px',
  border: '1px solid red'
}}>
  <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '100px',
    height: '100px',
    backgroundColor: 'blue'
  }}>
  </div>
</div>

4. Margin: auto

// Только для горизонтального центрирования
<div style={{
  width: '200px',
  margin: '0 auto'  // Центрирует блочный элемент
}}>
  Содержимое
</div>

// Для обоих направлений нужен position
<div style={{
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  margin: 'auto',
  width: '100px',
  height: '100px'
}}>
</div>

React с Tailwind (рекомендуется)

// Горизонтально: mx-auto
export function HorizontalCenter() {
  return <div className="w-48 h-48 mx-auto border border-red-500" />;
}

// Оба направления: flex + justify-center + items-center
export function CenterBox() {
  return (
    <div className="flex justify-center items-center w-48 h-48 border border-red-500">
      Содержимое
    </div>
  );
}

// Grid вариант
export function GridCenter() {
  return (
    <div className="grid place-items-center w-48 h-48 border border-red-500">
      Содержимое
    </div>
  );
}

Сравнение способов

// 1. FLEX (ЛУЧШИЙ ВЫБОР)
display: flex;
justifyContent: center;
alignItems: center;
// Плюсы: работает везде, просто
// Минусы: нужно явно указать высоту

// 2. GRID (АЛЬТЕРНАТИВА)
display: grid;
placeItems: center;
// Плюсы: компактнее, одно свойство
// Минусы: ненадежнее на старых браузерах

// 3. MARGIN: AUTO (ДЛЯ ГОРИЗОНТАЛИ)
margin: 0 auto;
// Плюсы: простой синтаксис
// Минусы: только по горизонтали, нужна width

// 4. ABSOLUTE + TRANSFORM (LEGACY)
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// Плюсы: работает везде
// Минусы: громоздко, требует position: relative на родителе

Ответ: text-align работает только для содержимого текста, не для самого элемента. Используй flexbox для надежного и универсального центрирования.