Как выровнять блоки по вертикали в рамках одного стиля?

Для выравнивания блоков по вертикали в рамках одного стиля в HTML можно использовать различные методы. Вот некоторые из них:

1. Использование свойства display: flex. Этот подход позволяет устанавливать блокам общий контейнер и применять к нему свойство display: flex. Затем, чтобы выровнять блоки по вертикали, можно использовать свойство align-items: center, которое центрирует элементы по вертикали внутри контейнера. Например:

<style>
  .container {
    display: flex;
    align-items: center;
  }
</style>

<div class="container">
  <div class="block">Блок 1</div>
  <div class="block">Блок 2</div>
</div>

2. Использование свойства position: absolute. В этом случае вы можете задать блоку позицию absolute, а затем использовать свойства top и bottom с координатами 50% и transform: translateY(-50%), чтобы выровнять его по вертикали относительно родительского контейнера. Например:

<style>
  .container {
    position: relative;
  }
  .block {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

<div class="container">
  <div class="block">Блок 1</div>
  <div class="block">Блок 2</div>
</div>

3. Использование свойства display: table и display: table-cell. В этом случае вы можете установить блокам свойство display: table-cell, а родительскому контейнеру - свойство display: table. Затем, чтобы выровнять элементы по вертикали, вы можете использовать свойство vertical-align: middle. Например:

<style>
  .container {
    display: table;
  }
  .block {
    display: table-cell;
    vertical-align: middle;
  }
</style>

<div class="container">
  <div class="block">Блок 1</div>
  <div class="block">Блок 2</div>
</div>

Это лишь некоторые примеры способов выравнивания блоков по вертикали в рамках одного стиля в HTML. В зависимости от ваших конкретных потребностей и структуры страницы, вы можете выбрать тот вариант, который наиболее подходит для вашего проекта.