Как вертикально выровнять текст внутри flexbox?

Я хотел бы использовать flexbox для вертикального выравнивания некоторого контента внутри <li>, но без особого успеха.

Я проверил онлайн, и во многих уроках фактически используется div-обертка, который получает align-items:center из настроек flex на родительском элементе, но мне интересно, можно ли вырезать этот дополнительный элемент?

В этом случае я решил использовать flexbox, поскольку высота элемента списка будет динамической %.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

Ответы

Ответ 1

Редактировать: Пожалуйста, используйте ответ Michael_B вместо моего.

Я бы удалил этот ответ, если бы мог, но принятые ответы не могут быть удалены.

Если вы делаете направление flex-direction вертикальным (используя column), то justify-content: center центрирует justify-content: center вертикали. Тогда вы можете просто использовать text-align: center для text-align: center по горизонтали.

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

Вот рабочая демка в codepen.

Ответ 2

Вместо использования align-self: center используйте align-items: center.

Нет необходимости менять flex-direction или использовать text-align (как предложено в другом ответе).

Вот ваш код, с одной настройкой, чтобы все это работало:

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

Свойство align-self применяется к элементам flex. За исключением того, что li не является flex-элементом, потому что его родитель - ul - не имеет display: flex или display: inline-flex apply.

Следовательно, ul не является гибким контейнером, li не является гибким элементом, и метод align-self оказывает никакого влияния.

Свойство align-items аналогично свойство align-self, за исключением того, что оно применяется к контейнерам flex.

Поскольку li является гибким контейнером, align-items может использоваться для вертикального align-items дочерних элементов.

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

Ответ 3

Для будущих гуглеров,

Ответ, получивший наибольшее количество голосов, и второй по значимости, также предназначен для решения этой конкретной проблемы, опубликованной OP, где контент (текст) был "алгоритмически союзником", заключенным во встроенный блочный элемент. НО, ваш случай может касаться центрирования нормального элемента вертикально внутри контейнера, что также применимо в моем случае, так что для этого все, что вам нужно, это

align-self: center;

Просто выкладываю это здесь, так как это лучший результат для вышеупомянутого запроса, а также я был довольно смущен в течение некоторого времени * Derp *

Ответ 4

Лучший шаг - просто вставить flexbox внутрь flexbox. Все, что вам нужно сделать, это дать ребенку align-items: center. Это будет вертикально выравнивать текст внутри его родителя.

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}

Ответ 5

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-items:center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

Ответ 6

Вы можете изменить отображение ul и li на table и table-cell. Тогда vertical-align будет работать для вас:

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK