前50％不起作用，父高度设置为自动

Question

我试图将子div垂直居中于其父级内部时遇到一些问题。我正在使用这个mixin：

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

但似乎“top：50％”指令无效。我认为这可能是因为父div高度设置为auto（它只有“min-height：100％”）。

我知道如何解决这个问题？

提前致谢！

Answer 1

确保父元素具有position: relative并将您的代码（要居中的子元素）更改为position: absolute。这应该是诀窍。另请参阅有关CSS中心的this文章。希望这有帮助！