几乎所有的方法都需要指定高度，但通常我们没有任何高度。

这里有一个css3的三行技巧，它不需要知道高度。

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

甚至在IE9中也支持它。

与其供应商前缀:

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

来源:垂直对齐任何只需3行CSS

<div id="header" style="display: table-cell; vertical-align:middle;">

...

或CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

浏览器覆盖

我一个朋友的一个技巧:

Div:前面{内容:" ";显示:inline-block;高度:100%;vertical-align:中间;} Div p{显示:inline-block;} < div风格= "高度:100 px;边界:1 px固体;" > < span style=" font - family:宋体;"</p> .我是垂直居中的 < / div >

演示。

我的技巧是在div里面放一个表，一行一列，设置100%的宽度和高度，属性vertical-align:middle:

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

小提琴: http://jsfiddle.net/joan16v/sbqjnn9q/

现在Flexbox的支持正在增加，这个CSS应用到包含元素将垂直居中所有包含的项目(除了那些指定对齐本身的项目，例如align-self:start)

.container {
    display: flex;
    align-items: center;
}

如果你还需要针对ie10和更老版本(< 4.4 (KitKat))的Android浏览器，请使用带前缀的版本:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

只需在div中使用一个单格表!只需设置单元格和表格的高度和与100%，你可以使用垂直对齐。

一个单元表内的div处理垂直对齐和向后兼容回石器时代!