12  

Since this question was tagged CSS3, here's a "least horrible" solution using CSS3's "flexbox". Unfortunately only recent versions of Safari, Chrome and Firefox support it.

由于这个问题被标记为CSS3，这里有一个使用CSS3的“flexbox”的“最不恐怖”的解决方案。不幸的是，只有最近版本的Safari、Chrome和Firefox支持它。

html, body {
  margin:0;
  padding:0;
  height:100%;
  background:#eee;
}
header {
  width:30em;
  background:#fff;
}
body {  
  display:box;
  box-pack:center;
  box-align:center;
  box-orient:horizontal;
}

A more complete demo can be found here.

一个更完整的演示可以在这里找到。

4  

If you do NOT know the height of the header the only way I often use, requires extra html if done properly, tough you could do without.

如果你不知道标题的高度，这是我经常使用的唯一方法，需要额外的html，如果做得正确，很难没有。

You make the header vertical-align: middle by making it a table-cell

通过将标题设置为表格单元格，可以使标题垂直对齐:居中

html{
    height: 100%;
}      
body {
    display: table;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}
header {
    display: table-cell;
    vertical-align: middle;
}

note that I set 100% height on the html node, which really isnt proper css as far as I know, it should be on the body and header should be in a encapsulating div wich has display: table http://jsfiddle.net/bgYPR/2/

注意，我在html节点上设置了100%的高度，据我所知，这确实不是合适的css，它应该在主体上，header应该在一个封装的div中:table http://jsfiddle.net/bgYPR/2/

3  

Unfortunately, there's still nothing elegant for vertical alignment, only hacks.

不幸的是，对于垂直对齐仍然没有什么优雅可言，只有一些技巧。

2  

I don't know if there's a best way, but there are a number of different ways (depending on your situation), and many are thoroughly discussed in this article.

我不知道是否有最好的方法，但是有许多不同的方法(取决于您的情况)，本文将详细讨论其中的许多方法。

1  

Usually when I need vertical centering I use a pair of inline-block elements. You have one element that is the full height of the container, and a second element that is only the height of the content to be centered. Both are display:inline-block;vertical-align:middle.

通常，当我需要垂直的定心时，我使用一对线块元素。您有一个元素是容器的全高度，第二个元素是内容的高度。两者都显示:inline-block;vertical-align:中间。

I like to use b tags for this, because they have no semantic significance and are tiny:

我喜欢使用b标签，因为它们没有语义意义，而且很小:

    This is my centered content
It makes me happy!

Mind you, this specific code example wont work in IE7 because of the lack of inline-block and sibling selectors (+), but the same technique can be done using more complex code that IE7 will handle.

注意，这个特定的代码示例不会在IE7中工作，因为缺少inline-block和同胞选择器(+)，但是同样的技术可以使用IE7将处理的更复杂的代码来完成。

0  

I would generally not verticially center, but specify a small top margin like 20px. We don't always know enough about the end user's equipment to make an assumption about what is convenient or usable for the platform they are viewing the site on.

我一般不垂直居中，而是指定一个小的顶部空白，比如20px。对于终端用户的设备，我们并不总是足够了解他们所看到的平台的方便或可用性。