Итак, есть объект - div, который очень хотелось бы разместить по центру видимой области. Уточняю - по центру той зоны, куда смотрит пользователь по верх всех объектов что имеются.
Со вторым я справился - поставил position: absolute;
да и всё. А вот как сделать центрирование да перемещение в видимую зону сказать затрудняюсь.
Пробовал использовать hv
, но увы считает от начала да еще и только то, что я вижу - не до места куда я вижу что не удивительно. Поэтому, возможно стоит использовать JS чтобы реализовать задачу? Что можете сказать дорогие господа?
1 ответ
Сложно понять в чем конкретно ваша проблема. Попробуйте поставить position: fixed и z-index: тут должна быть цифра больше самого максимального значения, если нет поставьте 99. Центрирование задается за счет выставление позиции на 0, и автоматического отступа(не обязательно именно так)
.container {
position:fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 300px;
background: white;
z-index:99;
}
Если ваш объект для центрирования находится в родителе, можете отцентрировать через свойства flex
.
display: flex;
justify-content: center;
align-items: center;
z-index: 100;