В чем разница между display: flex и table-cell для центрирования контента?

Разница между display: flex и table-cell для центрирования контента заключается в том, что они подходят для разных задач.

Display: flex позволяет центрировать контент как по горизонтали, так и по вертикали. dev-tricks.ru learntutorials.net Flex-элементы выстраиваются в один ряд и приобретают одинаковую высоту. skillbox.ru Однако такой подход имеет недостаток: страница будет выравнивать по центру все элементы внутри себя, а не только те, которые нужны. skillbox.ru

Display: table-cell используется для вертикального центрирования. learn.javascript.ru skillbox.ru Для элемента с таким display применяются те же алгоритмы вычисления ширины и центрирования, что и в TD. learn.javascript.ru Способ не требует знания высоты элементов, но вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. learn.javascript.ru Это не всегда желательно. learn.javascript.ru Чтобы растянуть родительский блок, нужно указать width явно. learn.javascript.ru

Таким образом, display: flex подходит для универсального центрирования, а display: table-cell — для вертикального центрирования.