Выравнивание по вертикали с помощью CSS

Существует несколько способов выравнивания элементов по вертикали с использованием CSS.

Используя комбинацию свойств и методов, мы можем добиться желаемого результата. Рассмотрим некоторые из них.

1. Использование таблицы:

   Один из наиболее простых способов выполнения вертикального выравнивания - это использование таблицы. Создадим таблицу с единственной ячейкой и установим ей свойство display: table-cell. Затем укажем свойство vertical-align: middle для достижения вертикального выравнивания содержимого.

   
   <div class="container">
     <div class="table-cell">Содержимое для выравнивания по вертикали</div>
   </div>
   
   <style>
   .container {
     display: table;
     width: 100%;
     height: 100vh;
   }
   
   .table-cell {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
   }
   </style>
           

2. Использование свойств flexbox:

   Flexbox - это мощный инструмент для создания гибкого макета и выравнивания элементов по центру.

   
   <div class="container">
     <div class="flexbox-container">
       <div class="flexbox-item">Содержимое для выравнивания по вертикали</div>
     </div>
   </div>
   
   <style>
   .container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
   }
   
   .flexbox-container {
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .flexbox-item {
     text-align: center;
   }
   </style>
           

3. Использование свойства position:

   Еще один способ выполнения вертикального выравнивания - это использование абсолютного позиционирования элементов и свойства transform.

   
   <div class="container">
     <div class="positioned-item"> Содержимое для выравнивания по вертикали</div>
   </div>
   
   <style>
   .container {
     position: relative;
     width: 100%;
     height: 100vh;
   }
   
   .positioned-item {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
   }
   </style>
           

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