Question

我需要用css将模态居中。我使用的位置：固定;顶部：50％;左：50％; 但是，由于站点具有固定的左侧导航栏，因此它相对于右侧的主内容div进行定位。我可以使用css对浏览器总宽度进行定位，忽略容器div吗？

Answer 1

使用评论查看新的简化版本。

＆＃13;

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

＆＃13;

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

＆＃13;

更多信息：

CSS - 关于文档的中心div

1 个答案: