Техники CSS: как вертикально выровнять текст посередине

Чтобы выровнять текст посередине по вертикали с помощью CSS, вы можете использовать несколько методов. Вот некоторые распространенные подходы:

  1. Использование Flexbox:

    .container {
     display: flex;
     align-items: center;
    }
  2. Использование сетки:

    .container {
     display: grid;
     place-items: center;
    }
  3. Использование ячейки таблицы:

    .container {
     display: table-cell;
     vertical-align: middle;
    }
  4. Использование положения и преобразования:

  5. Использование высоты и высоты строки:

    .container {
     height: 100px; /* Adjust the height as needed */
     line-height: 100px; /* Should be the same as the container height */
    }
  6. Использование CSS Grid с автоматическими полями:

    .container {
     display: grid;
    }
    .centered-text {
     margin: auto;
    }
  7. Использование Flexbox с автоматическими полями:

    .container {
     display: flex;
    }
    .centered-text {
     margin: auto;
    }