Центрирование div в модальном окне

Question

Я использую flexbox в своем модальном окне. Но он не вертикально центрирован.

.menu-wrapper { 
display: flex; 
align-items: center; 
justify-content: center; 
align-content: center;  
} 
.menu-window { 
display: flex; 
background:white; 
margin: auto; 
} 

Example

Answer 1

при использовании display:flex сначала в menu-wrapper, то вам нужно написать topMenuWindow.style.display = (topMenuWindow.style.display === "flex") ? "none" : "flex"; вместо topMenuWindow.style.display = (topMenuWindow.style.display === "flex") ? "none" : "block";

(function() { 
 
    var topMenuButton = document.querySelector("#menu_button"); 
 
    var topMenuWindow = document.querySelector('#topMenuWindow'); 
 

 
    topMenuButton.addEventListener('click', topMenuButtonChange); 
 

 
    function topMenuButtonChange() { 
 
    topMenuShow(); 
 
    } 
 

 
    function topMenuShow() { 
 
    topMenuWindow.style.display = (topMenuWindow.style.display === "flex") ? "none" : "flex"; 
 
    } 
 

 

 

 
})();

.menu-button { 
 
    color: red; 
 
    z-index: 10; 
 
} 
 
.menu-wrapper { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -ms-flex-line-pack: center; 
 
    align-content: center; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.1); 
 
    display: none; 
 
} 
 
.menu-window { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    background: white; 
 
    max-width: 50%; 
 
    max-height: 50%; 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="menu__button" id="menu_button">open modal</div> 
 

 
<div class="menu-wrapper" id="topMenuWindow"> 
 
    <div class="menu-window"> 
 
    CONTENT HERE 
 
    </div> 
 
</div>

Когда ваш скрипт работает display:flex Свойство main-wrapper изменяется на display:block, который создает ошибки css.

Answer 2

Когда вы открываете модальный символ display изменяется на block. Установите дисплей flex:

function topMenuShow() { 
    topMenuWindow.style.display = (topMenuWindow.style.display === "flex") ? "none" : "flex"; 
} 

Answer 3

это происходит потому, что после нажатия кнопки, .menu-wrapper имеет display:block. для вертикального выравнивания по центру нужно иметь display:flex так изменить block к flex в ваших JS:

function topMenuShow() { 
    topMenuWindow.style.display = (topMenuWindow.style.display === "flex") ? "none" : "flex"; 
} 

посмотреть здесь: jsfiddle

дайте мне знать, если это то, что вы искали

Answer 4

Do you need like this: 
you can refer a link:https://jsfiddle.net/rponj88t/2/ 
Html: 
       <div class="menu__button" id="menu_button">open modal</div>    

      <div class="menu-wrapper" id="topMenuWindow"> 
       <div class="menu-window"> 
        <centre>CONTENT HERE</centre> 
       </div> 
      </div> 
Css: 
.menu-button { 
    color:red; 
    z-index:10; 
} 
.menu-wrapper { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    align-items: center; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    -ms-flex-line-pack: center; 
    align-content: center; 

    position: fixed; 
    top: 0; left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.1); 
    display: none; 
} 
.menu-window { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    background:white; 
    max-width: 50%; 
    max-height: 50%; 
    margin:auto; 
    margin-text:centre; 
    text-align:centre; 
    vertical-align:middle; 
    display:normal; 
    position:relative; 
    top: 50%; 
    transform: translateY(-10%) 
} 
Js: 
(function() { 
    var topMenuButton = document.querySelector("#menu_button"); 
    var topMenuWindow = document.querySelector('#topMenuWindow'); 

    topMenuButton.addEventListener('click', topMenuButtonChange); 

    function topMenuButtonChange() {  
     topMenuShow(); 
    } 

    function topMenuShow() { 
     topMenuWindow.style.display = (topMenuWindow.style.display === "flex") ? "none" : "block"; 
    } 



})();