如何垂直居中div？

Question

我div想要水平和垂直居中.

对于横向问题,一切都很好,但我有垂直对齐的问题.

我试过这个:

#parent {
    display: table;
}

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

但这不起作用.

Answer 1

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

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

如果你必须支持旧的浏览器,就可以使用它们的组合,但他们可能是由于在渲染差异的疼痛blockVS table.

#parent {
    display: table;
}

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

如果你的身高是固定的,你需要支持那些非常古老,讨厌的浏览器......

#parent {
   position: relative;
}

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

如果你的身高没有固定,有一个解决方法.

在jsFiddle上看到它.