只需这样做：在div中添加类：

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

请阅读本文以获得解释。注：高度是必需的。

我分享了一个简短的版本。

.first分区{显示：表格；位置：绝对；顶部：0；左：0；高度：100%；宽度：100%；}.firstDivision垂直中心{文本对齐：居中；显示：表格单元格；垂直对齐：中间；}<div class=“firstDivision”><div class=“verticalCenter”>垂直文本居中。</div></div>

现在，Flexbox解决方案是现代浏览器的一种非常简单的方式，因此我向您推荐：

.容器{显示：柔性；对齐项目：居中；对齐内容：中心；高度：100%；背景：绿色；}身体html格式{高度：100%；}<div class=“container”><div>div垂直对齐</div></div>

下面是我可以构建的最好的全方位解决方案，以垂直和水平居中固定宽度、灵活高度的内容框。它已在Firefox、Opera、Chrome和Safari的最新版本中测试并运行。

.外部{显示：表格；位置：绝对；顶部：0；左：0；高度：100%；宽度：100%；}.中间{显示：表格单元格；垂直对齐：中间；}.内部{左边距：自动；右边距：自动；宽度：400px；/*你想要什么宽度*/}<div class=“outer”><div class=“middle”><div class=“inner”><h1>内容</h1><p>从前，一个沉闷的午夜</p＞</div></div></div>

查看动态内容的工作示例

我内置了一些动态内容来测试它的灵活性，并希望知道是否有人发现它有任何问题。它也可以很好地用于居中的覆盖——灯箱、弹出窗口等。

不幸的是，但并不令人惊讶的是，解决方案比人们希望的更复杂。同样不幸的是你需要在垂直居中的div周围使用额外的div。

对于符合标准的浏览器，如Mozilla、Opera、Safari等，您需要将外部div设置为显示为表，将内部div设置为表单元格-然后可以垂直居中。对于InternetExplorer，您需要将内部div绝对放置在外部div中，然后将顶部指定为50%。以下页面很好地解释了这一技术，并提供了一些代码示例：

CSS中的垂直居中未知高度的CSS垂直居中（兼容Internet Explorer 7）（Wayback Machine提供的存档文章）

还有一种使用JavaScript进行垂直居中的技术。内容与JavaScript和CSS的垂直对齐演示了这一点。

名单上还有一个我看不到的：

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

跨浏览器（包括Internet Explorer 8-Internet Explorer 10，无黑客攻击！）响应百分比和最小值/最大值-居中，不考虑填充（不考虑框大小！）必须声明高度（请参见可变高度）建议设置溢出：自动防止内容溢出（请参阅溢出）

来源：CSS中的绝对水平和垂直居中