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