Позицонирование элемента относительно динамически изменяющиеся ширины родителя?

Question

[qwerty1777]

Как спозиционировать элемент относительно родителя у которого динамическая ширина, чтобы элемент всегда располагался строго по центру? Пример: при наведение на блок родителя снизу вылетает типа попап блок.

Comments

[Justique]

position: absolute;
top: calc(50% - xxx px);
left: calc(50% - xxx px);

[Justique]

Либо родителю
display: flex;
justify-content: center;
align-items: center;

[Dima Polos]

Justique, родителю display: flex; ребенку - margin: auto.

[Justique]

Dima Polos, в обоих случаях работает же)
https://jsfiddle.net/847orqt3/

[qwerty1777]

Dima Polos, помогло, от души

[Dima Polos]

Justique, согласен полностью, просто кода меньше:)

Answer 1

[Сергей Свиридонов]

Есть один НЕ правильный вариант. Через JS.

var pb_height = $('.parentBlock').height();
var ch_height = $('.childrenBlock').height();

$('.childrenBlock').css('margin-top', (pb_height - ch_height) / 2);

а в css для childrenBlock margin: 0 auto; (ну и max-width) если нужно.

ЕСЛИ max-width не нужно, и блок должен быть всегда по центру (не известны пропорции блоков по ширине), то аналогичный скрипт с использованием width().

Answer 2

[Конан Варвар]

https://jsfiddle.net/f4gsto7p/

Comments

[qwerty1777]

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

[Lander]

qwerty1777, Ну поставьте wraper'у width: 100%; и посмотрите на результат!