我有一个div,我想要水平和垂直的中心.
对于水平问题,一切都很棒,但是我有一个垂直对齐的问题.
我试过这个：
#parent {
display: table;
}
#child {
display: table-row;
vertical-align: middle;
}
但这不行.
解决方法
如果您只需要支持支持transform(或其供应商前缀版本)的浏览器,请使用这一个奇怪的旧技巧来垂直对齐元素.
#child {
position: relative;
top: 50%;
transform: translateY(-50%);
}
如果你必须支持旧的浏览器,可以使用这些组合,但是由于渲染块vs表的差异,它们可能会很痛苦.
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
如果你的身高是固定的,你需要支持那些真正老旧的浏览器
#parent {
position: relative;
}
#child {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
如果你的身高不固定,那就有workaround.
