CSS - 关于文档的中心div

Question

我需要将模式与CSS集中。我用过position：fixed;顶部：50％;左：50％; 但是，由于该站点具有固定的左侧导航栏，因此它会对右侧的主内容div进行定位。我可以使用CSS来定位整个浏览器的宽度，忽略容器div吗？

Answer 1

结账与评论新的简化版本。

#modal-overlay { 
 
    /* stretch overlay to all screen and fix it */ 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    
 
    /* place it higher by z-axis */ 
 
    z-index: 99999; 
 
    
 
    /*align children to center with flexbox */ 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    
 
    /* simple styling*/ 
 
    background: rgba(0, 0, 0, 0.8); 
 
} 
 
#modal { 
 
    /* simple styling*/ 
 
    width: 400px; 
 
    padding: 20px; 
 
    background: #fff; 
 
    font-size: 25px; 
 
    text-align: center; 
 
}

<div id="modal-overlay"> 
 
    <div id="modal"> 
 
    Hello world! 
 
    </div> 
 
</div>

更多信息：

1. Flexbox
2. Css positions