html - 如何让div垂直居中？

Question

我有一个 div，我想水平和垂直居中。

对于水平问题，一切都很好，但我在垂直对齐方面遇到了问题。

我试过这个:

#parent {
    display: table;
}

#child {
    display: table-row;
    vertical-align: middle;
}

但这行不通。

Answer 1

如果您只需要支持支持 transform(或其供应商前缀版本)的浏览器，请使用这个奇怪的老技巧来垂直对齐元素。

#child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

如果您必须支持较旧的浏览器，您可以结合使用这些浏览器，但由于渲染 block 与 table 的差异，它们可能会很痛苦。

#parent {
    display: table;
}

#child {
     display: table-cell;
     vertical-align: middle;
}

如果你的高度是固定的并且你需要支持那些非常陈旧、讨厌的浏览器......

#parent {
   position: relative;
}

#child {
   height: 100px;
   position: absolute;
   top: 50%;
   margin-top: -50px;
}

如果你的高度不固定，有一个workaround .

See it on jsFiddle .