添加行显示:table-cell;到该div的CSS内容。

只有表格单元格支持vertical-align: middle;，但是你可以把[table-cell]定义给div…

一个活生生的例子在这里:http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; /* This says treat this element like a table cell */
    vertical-align:middle; /* Now we can center vertically like in a TD */
}

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

对我来说，这是最好的解决方案:

HTML:

<div id="outer">
    <img src="logo.png">
</div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* Bring your own prefixes */
  transform: translate(-50%, -50%);
}

如果它是一行文本和/或图像，那么很容易做到。只使用:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

就是这样。如果它可以是多行，那么它就有点复杂。但在http://pmob.co.uk/上有解决方案。寻找“垂直对齐”。

因为他们往往是黑客或添加复杂的div…我通常使用带有单个单元格的表格来做这件事……让它尽可能简单。

2020年更新:

除非您需要让它在早期的浏览器(如Internet Explorer 10)上工作，否则您可以使用flexbox。目前所有主要浏览器都广泛支持它。基本上，容器需要被指定为一个伸缩容器，并沿着它的主轴和十字轴对中:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

为子元素指定一个固定的宽度，称为“flex item”:

#content {
  flex: 0 0 120px;
}

例如:http://jsfiddle.net/2woqsef1/1/

要收缩包装内容，这甚至更简单:只需删除flex:…线从伸缩项目，它是自动收缩包装。

例如:http://jsfiddle.net/2woqsef1/2/

上面的例子已经在MS Edge和Internet Explorer 11等主流浏览器上进行了测试。

如果您需要自定义它，请注意一个技术注意事项:在伸缩项内部，因为这个伸缩项本身不是一个伸缩容器，所以旧的非flexbox CSS方式可以正常工作。但是，如果向当前伸缩容器添加额外的伸缩项，则这两个伸缩项将水平放置。为了使它们垂直放置，添加flex-direction: column;到flex容器。这就是它在伸缩容器及其直接子元素之间的工作方式。

还有另一种方法:不为伸缩容器的主轴和十字轴上的分布指定中心，而是指定边距:auto在伸缩项目上占用所有四个方向上的所有额外空间，均匀分布的边距将使伸缩项目在所有方向上居中。这是有效的，除非有多个伸缩项目。此外，这种方法适用于MS Edge，但不适用于Internet Explorer 11。

2016 / 2017年更新:

更常用的方法是transform，即使在老式浏览器(如Internet Explorer 10和Internet Explorer 11)中也能很好地工作。它可以支持多行文本:

position: relative;
top: 50%;
transform: translateY(-50%);

例如:https://jsfiddle.net/wb8u02kL/1/

收缩包装宽度:

上面的解决方案使用固定宽度的内容区域。要使用收缩包装宽度，请使用

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

例如:https://jsfiddle.net/wb8u02kL/2/

如果需要Internet Explorer 10的支持，那么flexbox将不起作用，上面的方法和line-height方法将起作用。否则，flexbox将完成这项工作。

这是非常简单的代码，为我工作!它只有一行，你的文本将水平居中。

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

输出如下所示:

应用样式:

position: absolute;
top: 50%;
left: 0;
right: 0;

无论长度如何，文本都将居中。