你可以尝试非常简单的代码:

  display: flex;
  align-items: center;
  justify-content: center;

.box { 身高:90 px; 宽度:90 px; 背景:绿色; 显示:flex; 对齐项目:中心; justify-content:中心; ｝ < div class = "盒子" > Lorem < / div >

代码依赖链接:http://codepen.io/santoshkhalse/pen/xRmZwr

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

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将完成这项工作。

方法1

div { 身高:90 px; 行高:90 px; text-align:中心; 边界:2px虚线#f69c55; ｝ < div > 你好,世界! ! < / div >

方法2

div { 身高:200 px; 行高:200 px; text-align:中心; 边界:2px虚线#f69c55; ｝ 跨度{ 显示:inline-block; vertical-align:中间; 行高:正常; ｝ < div > <span>我与你同在，我与你同在。对我说，对我说，对我说。非enim iam stirpis bonum quaeret, sed animalis。< / span > < / div >

方法3

div { 显示:表; 身高:100 px; 宽度:100%; text-align:中心; 边界:2px虚线#f69c55; ｝ 跨度{ 显示:表格单元; vertical-align:中间; ｝ < div > <span>神圣的神圣，神圣的神圣。</span> < / div >

这应该是正确答案。最干净最简单:

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

div { 身高:90 px; 行高:90 px; text-align:中心; 边界:2px虚线#f69c55; } < div > 你好,世界! ! < / div >

将这个CSS类赋给目标<div>:

.centered { 宽度:150 px; 身高:150 px; 显示:flex; 对齐项目:中心; justify-content:中心; text-align:中心; 背景:红色;/*不需要只是为了清楚地看到结果*/ ｝ <div class="居中">这个文本水平和垂直居中</div>