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，因此在JS中将block更改为flex：

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";
    }



})();

在模态窗口中居中div

4 个答案: