Не удается центрировать div на экране поверх содержимого страницы после установки функции «display: block» с использованием z-index?

Question

В настоящее время я создаю игру в блэкджек и использую оповещения, чтобы сообщить игроку, что он выиграл. В конце концов я переключился на использование animate. css, чтобы на экране появилось простое сообщение «Вы выиграли» и «Вы проиграли» после того, как логика c обнаружит победителя.

Я делаю это с помощью наличие функции popup (), которая запускается каждый раз, когда встречается параметр выигрыша или проигрыша в if if, и устанавливает отображение на «block». Сначала у меня был этот анимационный div между двумя сторонами игрового поля (сторона игрока и дилера, каждая со свойством flex), но я ненавидел тот факт, что, когда div появляется в запущенной функции, он толкает сторону игрока вниз , Чтобы исправить это, я подумал, что я мог бы просто добавить z-index к анимации, чтобы она просто перекрывалась.

Сначала это не работало, но затем я переместил div, содержащий мою анимацию, за пределы основной контейнер (который является гибким контейнером), который теперь работает и предотвращает выталкивание любого содержимого вниз ... но у меня возникают проблемы с позиционированием.

Я пытаюсь расположить div в центре экрана, чтобы действовать в качестве модального или всплывающего окна, и я хочу добавить интервал div, чтобы позволить мне закрыть весь контейнер, когда заканчивается таймер (и, таким образом, удалить анимацию с экрана и позволить игроку выбирать кнопка "новая игра").

Попробовав разные вещи, я могу либо ...

1. получить его центрирование (H и V), но нажав содержание (то есть z index не работает, именно с этого я и начал)

2. сделать так, чтобы он имел z-index и отображался над всем остальным, и даже чтобы он был центрирован на экране, б Вы не можете заставить его размеры работать должным образом, и есть этот странный сбой пользовательского интерфейса, когда полоса прокрутки появится, а затем исчезнет (как будто размер экрана увеличивается, когда анимация появляется, что странно, потому что анимация имеет z-индекс 2, так почему бы сделать экран больше? ).

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

Вот мой код:

  <h1 class="animated jackInTheBox" id="youWin"></h1>



 .jackInTheBox {
 animation-duration: 4s;
 animation-delay: 0s;
 animation-iteration-count: 1;
 margin: auto;
 font-size: 32px;
 position: relative;
 z-index: 2;
 margin: auto;
 max-width: 100%;
 text-align: center;
 display: none;
 background-color: teal;

}

Этот анимационный div находится внутри основного контейнера div, в самом верху

   .mainContainer {
   display: flex;
   flex-direction: column;
   width: auto;
   height: auto;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
   overflow: auto;
  }

Часть меня думает, что это было бы лучше сделать с модальным, но я все еще хотел бы видеть, где я иду не так. Спасибо всем заранее.

Answer 1

Если родительский контейнер имеет position: relative, а дочерний - position: absolute, вы можете установить дочерние элементы со следующими свойствами, чтобы переместить его в середину горизонтальной и вертикальной оси родителя:

 .jackInTheBox {
 animation-duration: 4s;
 animation-delay: 0s;
 animation-iteration-count: 1;
 font-size: 32px;
 z-index: 2;
 text-align: center;
 display: none;
 background-color: teal;

 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

Последние четыре строки позволяют Вы делаете это:

position: absolute; устанавливает дочерний элемент относительно левого угла родителей (если родитель имеет position: relative)

top: 50%; перемещает дочерний элемент к центру экрана (верхняя часть дочернего элемента) граница будет в середине горизонтальной оси экрана)

left: 50%; перемещает дочерний элемент в центр экрана (левая граница ребенка будет в середине вертикальной оси экрана)

transform: translate(-50%, -50%); заставляет ребенка перемещать 50% его ширины влево и 50% его высоты в вершину, делая его идеально отцентрированным, как вам нужно

После этого вам не нужно устанавливать width и max-width, так как <h1> разметка является блочным элементом, и она автоматически принимает 100% родительской ширины.

Дополнительно, вам не нужно указывать в родительском элементе display: relative, чтобы получить тот же эффект. Затем ребенок будет использовать исходные свойства экрана для установки положения.

Answer 2

Попробуйте сменить домкрат в классе ящика на положение, фиксированное с помощью

    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;

Как вы уже упоминали, это немного сложно выполнить, не имея возможности увидеть больше кода того, что у вас есть. Как вы думаете, вы могли бы добавить это как jsfiddle / codepen, который содержит весь ваш код? У меня такое ощущение, что проблема может быть в чем-то большем, чем то, что вы разместили.

Эта ссылка также может помочь https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/