Question

我有以下HTML

<div class="modal_overlay">
    <div class="modal_window">
        Content
    </div>
</div>

和以下CSS

div.modal_overlay {
    display: none;
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(150, 150, 150, 0.75);
}
div.modal_overlay .modal_window {
    padding: 10px;
    background-color: white;
}

modal_window填充了来自AJAX调用的任意内容。由于我不知道内容所需的宽度和高度，如何让modal_window占用所需的最小空间并在屏幕上垂直和水平居中？我正在寻找一种与大多数现代浏览器兼容的解决方案，我不需要在modal_overlay的任何子（递归）中指定高度或宽度（包括AJAX内容中的任何元素）。如果不使用JavaScript，这是否可行？如果我必须使用JavaScript，那么实现它的更好方法之一是什么？

编辑：我也想避免更改任何一个元素的显示类型。

Answer 1

试试这个：

div.modal_overlay .modal_window {
  padding: 10px;
  background-color: white;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

Answer 2

将display:flex与align-items: center;和justify-content: center;一起使用。并且在所有现代浏览器中工作。

div.modal_overlay {
    align-items: center;
    background-color: rgba(150, 150, 150, 0.75);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

<强> Working Fiddle

Answer 3

您可以使用min-width，max-width，并将其绝对置于中心位置。

＆＃13;

div.modal_overlay {
/* display: none; */
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(150, 150, 150, 0.75);
}
div.modal_overlay .modal_window {
padding: 10px;
background-color: white;
max-width: 800px;
min-width: 300px;
min-height: 200px;
position: absolute;
left: 50%;
top: 50% ;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

＆＃13;

<div class="modal_overlay">
<div class="modal_window">
    Content
</div>
</div>

＆＃13;

Answer 4

这是将div放在指定高度和宽度的中心的简单方法：

.center_div {
  position: fixed;
  display: block;
  z-index:999;
  right:40%;
  left:40%;
  bottom:40%;
  top:40%;
  background-color: rgba(150, 150, 150, 0.75);
}

通过增加/减少百分比来增加或减少宽度。

有没有办法将没有指定宽度或高度的div居中？

4 个答案: