仅垂直居中

如果您不关心InternetExplorer6和7，可以使用包含两个容器的技术。

外部容器：

应具有显示：table；

内部容器：

应具有显示：表格单元格；应垂直对齐：中间；

内容框：

应该有显示：inline块；

您可以将任何内容添加到内容框中，而不必考虑其宽度或高度！

演示：

正文{边距：0；}.外部容器{位置：绝对；显示：表格；宽度：100%；/*这可以是任意宽度*/高度：100%；/*这可能是任何高度*/背景：#ccc；}.内部容器{显示：表格单元格；垂直对齐：中间；}.居中内容{显示：内联块；背景：#fff；填充：20px；边框：1px实心#000；}<div class=“outer container”><div class=“内部容器”><div class=“居中内容”>马尔科姆在中间</div></div></div>

另请参见此Fiddle！

水平和垂直居中

如果要水平和垂直居中，还需要以下内容。

内部容器：

文本应对齐：居中；

内容框：

应重新调整水平文本对齐方式，例如文本对齐方式：左对齐；或文本对齐：右；，除非您希望文本居中

演示：

正文{边距：0；}.外部容器{位置：绝对；显示：表格；宽度：100%；/*这可以是任意宽度*/高度：100%；/*这可能是任何高度*/背景：#ccc；}.内部容器{显示：表格单元格；垂直对齐：中间；文本对齐：居中；}.居中内容{显示：内联块；文本对齐：左侧；背景：#fff；填充：20px；边框：1px实心#000；}<div class=“outer container”><div class=“内部容器”><div class=“居中内容”>马尔科姆在中间</div></div></div>

另请参见此Fiddle！

实际上，垂直居中需要两个div。包含内容的div必须具有宽度和高度。

#集装箱{位置：绝对；顶部：50%；页边空白：-200像素；/*#内容高度的一半*/左：0；宽度：100%；}#内容{宽度：624px；左边距：自动；右边距：自动；高度：395px；边框：1px实心#000000；}<div id=“container”><div id=“content”><h1>居中的div</h1></div></div>

这是结果。

此方法不使用任何变换。因此，输出变得模糊没有问题。

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;

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

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

我认为，对于所有不使用Flexbox的浏览器来说，“alignitems:center；”是一种显示：表格和垂直对齐：中间；的组合；。

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* Optional */
    height: 100%; /* Optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

演示：https://jsfiddle.net/6m640rpp/

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

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

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