Why is the element not centered?

Question

css

I'm making a modal in flexbox. div inside is not centered. Why?

<div class="header__menu">
                <div class="menu__button" id="menu_button">
                 open
                </div>               
  </div>
  <div class="menu-wrapper" id="topMenuWindow">
                <div class="menu-window">
                    Текст текст текст текст текст текст                    
                </div>
    </div>

with styles

.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;
    z-index:3;
}
.menu-window {
    background:white;
    height:200px;
    width:200px;
}

Example

Answer 1

.menu-wapper {
 width: 100vw;
 height: 100vh;
}
.menu-window {
 margin: auto auto;
}