将元素垂直居中的现代方法是使用flexbox。

你需要父母来决定身高，孩子来居中。

下面的示例将使div在浏览器中居中。重要的是（在我的示例中）将height:100%设置为body和html，然后将min-height:100%设置到容器。

正文，html{背景：#F5F5F5；框大小调整：边框框；高度：100%；边距：0；}#中心容器{对齐项目：居中；显示：柔性；最小高度：100%；}#中心{背景：白色；边距：0自动；填充：10px；文本对齐：居中；宽度：200px；}<div id='center_container'>我是中心</分区></div>

这在我的情况下有效（仅在现代浏览器中测试）：

.textthatneedstobecentered {
  margin: auto;
  top: 0; bottom: 0;
}

我认为，对于所有不使用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/

.center{
    display: grid;
    place-items: center;
}

将元素垂直居中的现代方法是使用flexbox。

你需要父母来决定身高，孩子来居中。

下面的示例将使div在浏览器中居中。重要的是（在我的示例中）将height:100%设置为body和html，然后将min-height:100%设置到容器。

正文，html{背景：#F5F5F5；框大小调整：边框框；高度：100%；边距：0；}#中心容器{对齐项目：居中；显示：柔性；最小高度：100%；}#中心{背景：白色；边距：0自动；填充：10px；文本对齐：居中；宽度：200px；}<div id='center_container'>我是中心</分区></div>

仅垂直居中

如果您不关心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！