使用 CSS，垂直对齐短标题和描述的最优雅方法是什么，而不是使用表格答案

【问题标题】：Using CSS, what is the most elegant way to vertical align a short title and a description, not using a table使用 CSS，垂直对齐短标题和描述的最优雅方法是什么，而不是使用表格
【发布时间】：2010-11-05 11:09:52
【问题描述】：

不使用表格并且
必须在 IE 7 和 Firefox、Chrome、Safari 中工作

垂直对齐的最简单方法：

A Title (20px)
With a variable length description (12px), can be 1 line or 2 (when wrapped)

在宽度为 500 像素、高度为 60 像素的 div 内，可能是通过使用表格。 不使用表格，最优雅的方法是什么？

请不要简单地给出“固定”高度解决方案的链接作为答案，因为它可以具有可变高度。

更新：示例和可编辑测试：http://jsfiddle.net/mn2CH/3/

【问题讨论】：

您有我们可以使用的示例吗？
当然，为了更好地看到中心效果，我将高度设置为 100px：jsfiddle.net/mn2CH/3

标签： css vertical-alignment

【解决方案1】：

看看这个：

Vertical centering with CSS

方法 2（使用负边距）是“经典”方法，我用过几次。

【讨论】：

绝对应该看看负边距方法。可能也是我找到的最好方法。

【解决方案2】：

我见过的支持旧版本 IE 的最简洁的方法是 this method。基本上，对于 IE，它使用一种巧妙的方法来拥有您的主容器，在您的情况下，它将是 500 像素 x 60 像素，然后是两个内部容器 - 一个与top: 50% 相对定位，另一个与top: -50% 相对定位.直观地说，一个容器位于主容器下方的一半位置，然后另一个容器向上移动其自身高度的一半。

当然，对于较新的浏览器，您可以在任意元素上使用较新的display 属性，上述文章也对此进行了说明。

【讨论】：

实际上...非黑客解决方案在 FF 或 Chrome 中不起作用：jakpsatweb.cz/css/priklady/… 一个解决方案如果是非黑客解决方案会更好，因为它更优雅