Как в bootstrap 5 разместить блок по центру страницы, а в этом блоке создать еще один блок по центру первого?

Для размещения блока по центру страницы в Bootstrap 5 вы можете использовать классы flexbox. Основной класс для выравнивания элементов в Bootstrap 5 Flexbox - это класс d-flex. Чтобы разместить блок по центру, вам также понадобится класс justify-content-center, который будет центрировать элементы горизонтально.

Чтобы создать внутренний блок по центру первого блока, вы можете использовать дополнительные классы flexbox. Следующий код демонстрирует решение вашей задачи:

<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div class="d-flex justify-content-center align-items-center" style="background-color: lightgray; padding: 20px;">
    <!-- Ваш содержимое второго блока -->
  </div>
</div>

В данном примере мы создаем внешний блок с классами d-flex justify-content-center align-items-center. d-flex делает блок флекс-контейнером, justify-content-center центрирует его по горизонтали, а align-items-center центрирует его по вертикали. Внутри этого блока располагается второй блок, который также имеет классы d-flex justify-content-center align-items-center для центрирования внутри родительского блока.

Обратите внимание, что в данном примере мы также добавляем внутренние стили для демонстрации. В реальном проекте вам следует вынести стили во внешние таблицы стилей или файлы CSS.

Надеюсь, это поможет вам центрировать блоки в Bootstrap 5.