Вертикально центрировать предметы с flexbox

я пытаюсь вертикально центрировать элементы с помощью CSS ' Flexbox; и я знаю, как это сделать с кодом без префикса поставщика, но даже с префиксами поставщика я могузаставить его работать в Webkit (Chrome).

Я пытаюсь выровнять по вертикали промежутки в #trigger.

Вот мой CSS:

#trigger{
    /* 2009 syntax */
    display: -webkit-box;
    display: box;
    /* current syntax */
    display: -webkit-flex;
    display: flex;
}

#trigger span{
    /* 2009 syntax */
    -webkit-box-align: center;
    /* current syntax */
    -webkit-align-items: center;
    flex-align: center;
}

Есть идеи, что я делаю не так?

И если вы знаете префиксы / версии других поставщиков, которые я использую, не стесняйтесь делиться ими, чтобы это работало не только в Webkit.

Ответы на вопрос(2)

Вертикально выровненный макет может быть достигнут с помощью следующих свойств, обратите внимание, что это использует старый синтаксис, хотя яМы протестировали последние версии Chrome, Firefox и Firefox Аврора -

#trigger {
  width: 200px;
  height: 200px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: vertical;
  box-pack: center;
  box-align: center;
}

#trigger span {
  display: block;
}

box-orient указывает, как поле "Дети должны быть выровнены, что в нашем случае является вертикальным.

box-pack выравнивает дочерние элементы вдоль оси ориентирования.

box-align выравнивает детей внутри коробки, этоОсь s перпендикулярна оси ориентации бокса, т.е. в нашем случае, поскольку ориентация бокса вертикальна, она 'Решу выравнивание детей по горизонтали.

Вот'сДемонстрация кода, свойства яприменяется к элементам span кромеdisplay: block чисто для косметических целей.

align-items собственность длягибкие контейнеры (элементы сdisplay: flex применяется к ним), а негибкие предметы (детигибкие контейнеры). Старая спецификация 2009 года не имеет свойства, сравнимого сalign-items;box-align недвижимость с 2009 года соответствует доalign-content из стандартной спецификации.

http://jsfiddle.net/mnM5j/2/

#trigger {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  height: 10em;
  background: yellow;
}


    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span>

ВАШ ОТВЕТ НА ВОПРОС