Вертикальный текст по центру в div: display: flex и align-items: center не работает

Question

Целью является вертикальное центрирование текста в элементе div. В этом ответе предлагается использовать display: flex и align-items: center, но он не работает.

Codepen: https://codepen.io/anon/pen/qgOJZg

<div id="messageBox" style="">
   <div class="message">YO THERE THIS ROCKS!</div>
</div>


#messageBox {
    min-width: 150px;
    padding: 15px 35px;
    position: absolute;
    margin-left: 50%;
    bottom: 0;
    background: #424242;
    color: #FFF;
    cursor: pointer;
    text-align: center;
    border-radius: 5px 5px 0 0;
    font-family: "Lato";
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 1

Есть так много, чтобы объяснить.Но сейчас просто взгляните на updated fiddle .

Прежде всего, ваш контейнер имеет высоту содержимого, которая является вашим текстовым полем и не более того, поэтому текстовое поле в основномв центре его контейнера.Но когда вы дадите ему height, вы увидите, что это не центр.Из-за особенностей flex-box он имеет значение по умолчанию flex-direction: row.Итак, вы собираетесь изменить это значение на column (что я и сделал в предоставленном jsFiddle), и это в значительной степени так.

Были также некоторые скромные изменения в структуре CSS, новы сами их найдете;объяснять не нужно.

В качестве дальнейшего исследования position: absolute сделает ребенка из flex-flow, как будто он совсем не потомок.Когда вы работаете с flex-box, вам не нужно элементы с абсолютным позиционированием большую часть времени.

Опять же, еще раз, пожалуйста, отметьте это здоровостатья о flex-box на css-tricks.com ;охвачено все и супер просто учить вещи.

Answer 2

@ Crashalot: с помощью высоты мы можем достичь высоты, но вы также можете использовать вертикальный центр, используя этот код.

#messageBox { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.message {
  position: relative;
  min-width: 150px;
  padding: 15px 35px;
  background: #424242;
  color: #FFF;
  cursor: pointer;
  cursor: pointer;
  text-align: center;
  border-radius: 5px 5px 0 0;
  font-family: "Lato";
  font-size: 17px;
}

<div id="messageBox" style="">
   <div class="message">YO THERE THIS ROCKS!</div>
</div>

Answer 3

Просто добавьте свой #messageBox к этому

#messageBox {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

Живой пример: https://codepen.io/anon/pen/VgvEyY