Как вертикально выровнять элементы внутри div?

Ваш код использует CSS-свойства для отображения элементов с использованием таблиц, и действительно, использование класса .class или идентификатора #id не повлияет на визуальный результат.

Ваш пример:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

и

div.ext-box { display: table; width: 100%; }
div.int-box { display: table-cell; vertical-align: middle; }

всё работает корректно независимо от того, как вы обозначаете элементы. Классы и идентификаторы служат для передачи стиля, но эффект отображения будет идентичен, если применяемые свойства остаются теми же.

Если вам нужно использовать #id, вы можете просто заменить .ext-box и .int-box на #ext-box и #int-box, и код всё ещё будет функционировать аналогичным образом:

#ext-box { display: table; width: 100%; }
#int-box { display: table-cell; vertical-align: middle; }

Таким образом, выбор между классами и идентификаторами часто зависит от ваших требований к семантике и специфичности селекторов.

Ваш CSS-код создает контейнер с классом .outer, который использует Flexbox для размещения дочерних элементов.

1. display: flex; — устанавливает контейнер как флекс-контейнер, что позволяет управлять расположением дочерних элементов с помощью Flexbox.
2. align-items: center; — выравнивает дочерние элементы по вертикали в центре контейнера.
3. justify-content: center; — выравнивает дочерние элементы по горизонтали в центре контейнера.

В результате, все дочерние элементы внутри .outer будут расположены в центре как по вертикали, так и по горизонтали. Если у вас есть дополнительные вопросы по этому коду или Flexbox в целом, не стесняйтесь задавать!

Это сработало для меня:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

Использование свойства display: table-cell позволяет центровать содержимое по вертикали, а min-height задает минимальную высоту контейнера. Таким образом, ваше содержимое будет находиться в центре .vcontainer.

Используйте эту формулу, и всё будет работать без проблем:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* Только для Internet Explorer */
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%;} /* Только для Internet Explorer */
/* Опционально: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      любой текст
      любая высота
      любой контент, например, сгенерированный из БД
      всё вертикально центрировано
    </div>
  </div>
</div>

Эта структура и стили гарантируют вертикальное центрирование содержимого внутри блока #outer, независимо от его высоты. Обратите внимание, что некоторые стили предназначены только для Internet Explorer, поэтому их можно опционально использовать.

Мой трюк заключается в том, чтобы поместить таблицу внутри div, у которой будет одна строка и один столбец, задать 100% для ширины и высоты, а также использовать свойство vertical-align: middle. Вот пример кода:

<div>
    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                TEXT КНОПКИ
            </td>
        </tr>
    </table>
</div>

Вы можете найти пример в этом Fiddle.

Таким образом, текст в ячейке будет выровнен по центру, что подходит для случаев, когда нужно правильно центрировать содержимое внутри блока.