CSS вертикальное выравнивание внутри FIXED position div

Ответ 1

Используйте трюк вертикального центра псевдоэлемента.

#header:before выводит встроенные элементы в центр. Прямым дочерним элементам заголовка присваивается display: inline-block и vertical-align: middle, чтобы сохранить прямую линию.

Подробнее о псевдоэлементах здесь.

Этот метод в основном добавляет "div" перед остальной частью вашего контента. (Он может быть заменен реальным <div>, если вам действительно нужно это работать в IE7 и ниже. [Не беспокойтесь!]). Он в основном выглядит следующим образом:

<div class="header">
  <!-- added by css -->
  <div>I am :before and you will all do as I say! To the middle, plebs!</div>
  <!-- end css content -->

  <div>Yes master!</div>
  <div>Anything you say sir!</div>
</div>

Рабочий пример

Примечание. Я удалил div из изображения. Это кажется ненужным, но может быть возвращено в случае необходимости. Кроме того, я нацелен только на прямых детей #header, используя селектор прямых детей: >. Вот огромный список селекторов CSS.

#header {
  position: fixed;
  height: 6em;
  display: block;
  width: 100%;
  background: rgb(0, 255, 255);
  /* Fall-back for browsers that don't support rgba  */
  background: rgba(0, 255, 255, 1);
  z-index: 9;
  text-align: center;
  color: #000000;
  top: 0px;
}
#header:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
#header > div,
#header > img {
  display: inline-block;
  font-size: 2.8em;
  padding: 0px 0px 0 0;
  vertical-align: middle;
}

<div id="header">
  <div id="bandname">Test</div>
  <img src="http://www.placehold.it/50" width="40" alt="tablets" />
  <div id="bandname">test</div>
</div>

Ответ 2

Вы можете использовать свойства left, right, top и bottom, например, установить em на 50% и использовать свойство transform для translate элемента -50% от себя отлично центрируйте его. Звучит путать, но я сделал скрипку: http://jsfiddle.net/zzztfkwu/ Будет ли это работать?

EDIT: http://jsfiddle.net/kbh97n82/1 обновленная скрипта с помощью решения .wrapper.

Ответ 3

Самое простое решение - иметь для него содержимое css.

#header .wrapper
{
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

Поскольку существует несколько дочерних элементов, лучше обернуть их вокруг div-оболочки. Вот рабочий пример:

http://jsfiddle.net/zf987w0b/1/