Как расположить всплывающее окно ровно посередине экрана

Question

Так, тапками в меня не кидаться - я сравнительно недавно присоединилась в ряды фронт энда. Мне надо сделать так, чтобы всплывающее окно всплывало посередине экрана вне зависимости от устройства. Я уже все вариации в CSS перепробовала, но либо я дико туплю, либо я дико накосячила с кодом. На данный момент я прописала media под все возможные размеры экрана, но хочется значительно сократить код -_-

**HTML**

    <div class="modal-content">
      <header class="header-container"> 
        <h2><i class="fa fa-suitcase"></i>Tickets</h2>
      </header>
      <div class="pop-container">
        <p><label><i class="fa fa-shopping-cart"></i> Tickets, $15 per person</label></p>
        <input class="content-input" type="text" placeholder="How many?">
        <p><label><i class="fa fa-user"></i> Send To</label></p>
        <input class="content-input" type="text" placeholder="Enter email">
        <button onclick="location.href='mailto:[email protected]';" class="pay__btn" >PAY <i class="fa fa-check"></i></button>
        <button class="close__btn" onclick="document.getElementById('ticketModal').style.display='none'">Close <i class="fas fa-times"></i></button>
        <p class="float-right">Need <a href="#">help?</a></p>
      </div>
    </div>
  </div>

**CSS (весь код для блока не буду вставлять, показываю лишь тот фрагмент, что был использован для центрирования дива) **
.modall {
    margin-top: 100px;
    position: fixed;
    top: 0;
    left: 0;
    max-width: 100%;
    z-index: 8;
    overflow: auto;
    margin: 100px 450px;
    box-shadow: 4px 4px 8px -1px rgba(34, 60, 80, 0.2);
}

**JS**
// кликни вне окна, чтобы закрыть
document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('ticketModal');
  if (!container.contains(e.target)) {
      container.style.display = 'none';
  }
});```

Answer 1

Посмотри как это делает react-modal

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)',
  },
};

БЛОГ НА HUSL

Как расположить всплывающее окно ровно посередине экрана

Ответы (1 шт):