我有一个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.