我们能想到的最简单的垂直对齐

总而言之，在容器中垂直对齐内容的方法很少。 这些是主要方法（如果您现在采用一些完全不同的方法来做到这一点，那么您将非常慷慨地提供示例 - 我将在此处将其合并）

1. using position and transform特性 -http://jsfiddle.net/EjV4V/3/这个很好，但对我来说，有点矫枉过正，特别是如果我们考虑渲染优化问题。适用于所有现代浏览器，不适用于 IE7。
2. using display: inline-block带有一个附加辅助块的房产 -http://jsfiddle.net/mmxm4/3/。由于使用了额外的 DOM 元素，我认为这种方法不好。不适用于 IE7。还值得一提（感谢@nclenorton 提到这一点），我们可以使用:before or :after生成的内容。但是，再一次——IE7 中没有.
3. using display: table and display: table-cell特性 -http://jsfiddle.net/Ppk3p/2/。有时这种方法很简洁，有时则不然。请注意，与其他示例相反，假设子单元格宽度存在问题。无论如何，在 IE7 中不起作用。

4. using display: box - http://jsfiddle.net/9Phgg/9/- 这是处理事情的最性感的方式，但据我们所知，规范并未 100% 完成。而且，Opera不支持flex box。是的，当然，甚至不要考虑在 IE7 中尝试这样的事情。

   我的问题是：“考虑到上述所有方法在 IE7 中都会失败，在所有现代浏览器中将元素垂直居中的最通用、优雅、简单和正确的方法是什么？and IE7?".

   我有一种强烈的感觉，哎呀，虽然已经是 2012 年了，但使用表格布局仍然是答案。我见过一些奇特的方法，例如使用position: absolute甚至是 javascript 表达式，但这远非优雅和简单。

经验丰富的 html 开发人员，如果我错了，请纠正我。

UPD:实际上，还有一种方法，但我发现它完全错误且不可行，原因有很多。但值得一提的是。默认情况下，按钮中的任何内容都是垂直居中的，所以看吧 -http://jsfiddle.net/s5nz4/3/。这在 IE7 中可以工作，但我们都是成年人，我希望能够理解这是不合适的）））

如果我需要 IE7 支持，我倾向于选择“display: inline-block使用额外的元素”方法。这does在 IE7 中工作小变化，这里是一个例子.

如果我不需要 IE7 支持，我通常使用display: table-cell method.

有时，我无法使用display: table-cell方法，通常当我需要使用绝对位置元素底部的某些东西时display: table-cell. position: relative不适用于表格单元格，至少在 Firefox 中是这样。在这些情况下，我使用display: inline-block方法，除了“额外元素”是通过插入:before，这可以保持 HTML 干净。