Вертикальное расположение и выравнивание элементов в HTML документе.

Инлайн-блочные (inline-block) модифицированые элементы

Расположение таких элементов в документе (в нормальном потоке) возможно при применении следующих правил CSS:

• margin-(top,bottom): +-px;
• line-height; (...); увеличение или уменьшение высоты строки, чаще применяется при установке inline элементов в горизонтальном меню

Применение правил CSS изменяющих нормальный поток элементов:

1. position: (absolute, relative)
2. transform: translate(y)

Центрирование инлайн блочных элементов

1. line-height; (...); задаем высоту строки равную высоте родительского блока
2. Если высота родительского блока не задана можно использовать CSS правило padding:
   1. <div class = "outer_block" >

   2.   <span class = "inner_block" > <input/></span>

   3. </div>
   1. ".outer_block" {

      padding: 5% 0;

      }
      
   2. ".inner_block" {

      padding: 10% 0;

      }

   внутренний элемент
3. Если высота внутреннего блока известна то можно задать фиксированные значения паддингов.
   Например: высота блока 600px, внутреннего 200px, тогда отступы нужны в 200px сверху и снизу.

Для элементов форм

• Использую свойство vertical-align и display: table ,display: table-cell; устанавливаем табличный вывод для родительского элемента div, а вложенный элемент input оборачиваем в тег выводим как ячейку таблицы.
  Теперь можно использовать свойство vertical-align для внутреннего контейнера.
  Все, что находится в нем, будет центрироваться по вертикали.
  1. <div class = "outer_block" >

  2.   <span class = "inner_block" > <input/></span>

  3. </div>
  1. ".outer_block" {

     display: table;

     width: 200px;

     height: 150px;

     border: 1px solid #ccc;

     }
     
  2. ".inner_block" {

     display: table-cell;

     vertical-align: middle;

     }