尝试嵌入表元素。

＜div＞<table style='width:200px；高度：100px；'><td style='vertical-align:middle；'>哥本哈根</td></table></div>

这是一个很好的资源

从…起http://howtocenterincss.com/:

以CSS为中心是一件令人头疼的事。根据各种因素，似乎有无数种方法可以做到这一点。这将整合它们，并为您提供每种情况所需的代码。

使用Flexbox

在保持这篇文章与最新技术保持同步的同时，这里有一个更容易的方法来使用Flexbox将内容居中。Internet Explorer 9及更低版本不支持Flexbox。

以下是一些很棒的资源：

Flexbox指南带Flexbox的定心元件Flexbox的Internet Explorer 10语法Flexbox支架

带有浏览器前缀的JSFiddle

李{显示：柔性；对齐内容：中心；对齐内容：居中；弯曲方向：柱；/*列|行*/}＜ul＞<li><p>某些文本</p></li><li><p>还有两行文字</p></li><li><p>更多的文本演示了行如何跨越多行</p></li></ul>

另一种解决方案

这是从零六三开始的，可以让你用六行CSS将任何东西居中

Internet Explorer 8及更低版本不支持此方法。

小提琴演奏家

p型{文本对齐：居中；位置：相对；顶部：50%；-ms变换：translateY（-50%）；-webkit转换：translateY（-50%）；变换：translateY（-50%）；}＜ul＞<li><p>某些文本</p></li><li><p>还有两行文字</p></li><li><p>更多的文本演示了行如何跨越多行</p></li></ul>

上一个答案

一种简单且跨浏览器的方法很有用，因为标记答案中的链接有点过时。

如何在无序列表和div中垂直和水平居中文本，而不使用JavaScript或CSS行高。无论您有多少文本，您都不必将任何特殊类应用于特定列表或div（每个列表或div的代码都相同）。这适用于所有主要浏览器，包括Internet Explorer 9、Internet Explorer 8、Internet Explorer 7、Internet Explorer 6、Firefox、Chrome、Opera和Safari。有两个特殊的样式表（一个用于InternetExplorer7，另一个用于Internet Explorer6）可以帮助它们，因为它们的CSS限制是现代浏览器所没有的。

Andy Howard-如何在无序列表或div中垂直和水平居中文本

由于我在上一个项目中不太关心InternetExplorer7/6，所以我使用了一个稍微精简的版本（即删除了使其在InternetExplorer7和6中工作的内容）。这可能对其他人有用。。。

JSFiddle公司

.外部容器{显示：表格；宽度：100px；/*父项的宽度*/高度：100px；/*父项的高度*/溢出：隐藏；}.outerContainer.innerContainer{显示：表格单元格；垂直对齐：中间；宽度：100%；边距：0自动；文本对齐：居中；}李{背景：#ddd；宽度：100px；高度：100px；}＜ul＞<li><div class=“outerContainer”><div class=“innerContainer”><div class=“element”><p><!-- 内容-->所容纳之物</p></div></div></div></li><li><div class=“outerContainer”><div class=“innerContainer”><div class=“element”><p><!-- 内容-->所容纳之物</p></div></div></div></li></ul>

我使用以下方法轻松地将随机元素垂直居中：

HTML格式：

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

这将使我的div中的文本位于200px高的外部div的垂直中间。请注意，您可能需要使用浏览器前缀（如我的例子中的-webkit）来使其适用于您的浏览器。

这不仅适用于文本，也适用于其他元素。

这是我找到的最干净的解决方案（InternetExplorer9+），并通过使用其他答案省略的转换样式，为“偏移0.5像素”问题添加了修复。

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

来源：垂直对齐任何东西，只需3行CSS

有一种更简单的方法可以垂直对齐内容，而无需诉诸表格/表格单元格：

http://jsfiddle.net/bBW5w/1/

在其中，我添加了一个不可见的（width=0）div，它假设容器的整个高度。

它似乎可以在Internet Explorer和Firefox（最新版本）中使用。我没有检查其他浏览器

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

当然，CSS：

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

在现代浏览器中，正确的方法是使用Flexbox。

有关详细信息，请参阅此答案。

请参阅下面的一些在旧浏览器中工作的旧方法。

CSS中的垂直居中http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要：

对于CSS2浏览器，可以使用display:table/display:table单元格来居中显示内容。

JSFiddle也提供了示例：

div｛border:1px实心绿色；｝<div style=“display:table；height:400px；溢出：隐藏；”><div style=“display：表格单元格；垂直对齐：中间；”>＜div＞在现代IE8+和其他版本中，一切都是垂直居中的。</div></div></div>

可以使用#将旧浏览器（Internet Explorer 6/7）的黑客行为合并到样式中，以隐藏新浏览器的样式：

div｛border:1px实心绿色；｝<div style=“display:table；height:400px；#position:relative；overflow:hidden；”><div样式=“#位置：绝对；#顶部：50%；显示：表格单元格；垂直对齐：中间；”><div style=“#position:relative；#top:-50%”>一切都是垂直居中的</div></div></div>