Блог

Итак, как я могу установить внутреннюю позицию элемента, привязанную к середине экрана? Я смог установить ось x div с помощью text-align: center; .

Итак, как я могу центрировать ось y так же, как я сделал ось x? И если это невозможно сделать, какой новый метод я должен использовать?

Код:

 .fixed{
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 0px;
    position: fixed;
    background-color: #00FF00;
    top: 0px;
    overflow: hidden;
    z-index: 99;
}

.popup{
    display: inline-block;
    width: 90%;
    max-width: 900px;
    min-height: 300px;
    border: 2px solid rgba(72, 72, 72, 0.4);
    margin-bottom: 50px;
    margin-top: 20px;
}  

 <div class="fixed">
    <div class="popup"></div>
</div>  

Я обновил вашу скрипку. Просто исправьте положение всплывающего класса и сделайте top, left, bottom, right = 0, затем margin:auto. Посмотрите эту обновленную скрипку.

 .popup{
   position:fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
}
  

https://jsfiddle.net/norxpmbr/

Для .popup попробуйте заменить это:

 margin-bottom: 50px;
margin-top: 20px;
  

С помощью этого:

 position: relative;
top: 50%;
transform: translateY(-50%);
  

Источник: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css /

Итак, это то, что я сделал с вашим кодом — удалил поля для popup и центрировал, используя transform и position: relative :

     .popup{
      display: inline-block;
      width: 90%;
      max-width: 900px;
      min-height: 300px;
      border: 2px solid rgba(72,72,72,0.4);
      margin    : 0;
      position: relative;
      top: 50%;
      transform: translate(0, -50%);
}
  

исправленная скрипка

Фрагмент ниже:

 .fixed {
  text-align: center;
  width: 100%;
  padding: 0;
  position: fixed;
  background-color: #00FF00;
  height: 100%;
  top: 0;
  overflow: hidden;
  z-index: 99;
}
.popup {
  display: inline-block;
  width: 90%;
  max-width: 900px;
  min-height: 300px;
  border: 2px solid rgba(72, 72, 72, 0.4);
  margin: 0;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}  

 <div class="fixed">
  <div class="popup">
  </div>
</div>