Несколько условий Microsoft Flow

Вот несколько простых методов для вертикального выравнивания:

Однострочное вертикальное выравнивание: среднее

Это легко: установите высоту строки текстового элемента в равный таковому для контейнера

  
  Doesn't work.

Несколько строк по вертикали: нижний

Абсолютно поместите внутренний div относительно его контейнера

  
This is positioned on the bottom

Несколько -lines vertical-align: middle

  
This is positioned in the middle

Если вы должны поддерживать древние версии IE & lt; = 7

Чтобы заставить это работать правильно по всем направлениям, придется немного взломать CSS. К счастью, есть ошибка IE, которая работает в нашу пользу. Устанавливая top:50% на контейнере и top:-50% на внутреннем div, вы можете добиться того же результата. Мы можем комбинировать эти два варианта с помощью другой функции, IE не поддерживает: расширенные селектора CSS.

  

    
Works in everything!
  

Переменная высота контейнера по вертикали: средняя

Это решение требует немного более современного браузер, чем другие решения, поскольку он использует свойство transform: translateY. ( http://caniuse.com/#feat=transforms2d )

Применение следующих трех строк CSS к элементу будет вертикально центрировать его внутри родителя независимо от высоты родительский элемент:

position: relative;
top: 50%;
transform: translateY(-50%);