Как вертикально центрировать блок с неизвестной шириной и фиксированной позицией?

Question

[Матвей Мамонов]

Есть контейнер .layer, у него 3 дочерних элемента. Первый - подложка, второй - собственно, его и нужно центрировать, и 3 здесь роли не играет. Это простой крестик для закрытия.

<div class="layer" id="menu-layer" style="visibility: hidden">
	<div class="overlay"></div>
	<div class="window">
		<a>...</a><br>
		<a>...</a><br>
		<a>...</a><br>
	</div>
	<span data-content="flaticon close"></span>
</div>

Дело в том, что этот блок должен находится вертикально по центру.
Самое очевидное решение - это сделать так:
transform: translateY(-50%);

Но проблема в том, что это очень сильно грузит браузер (у меня и так есть уже transform) и анимация не отображается.

Есть еще способ вычитания половины высоты в margin-top. Но тут проблема в том, что мне неизвестна высота моего div.window.

Пытался вычислить эту высоту с помощью JQeury и там же произвести необходимые манипуляции, но JQuery метод .height(), почему-то, возвращает мне ненастоящую высоту.

И не надо меня посылать в гугл, "1001 способ вертикального выравнивания" мне не помогает. Заранее спасибо.

Comments

[ultrbi4]

outerHeight пробывали?

Answer 1

[Николай Шабалин]

Если хотите на CSS у вас только два выхода - таблицами и flexbox.
Вот вам пример с flexbox