html - 前 50% 不起作用，父级高度设置为自动

Question

我在尝试将子 div 在其父 div 中垂直居中时遇到了一个小问题。我正在使用这个混音:

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

但似乎“top: 50%”指令不起作用。我认为这可能是因为父 div 高度设置为自动(它只有“最小高度:100%”)。

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

提前致谢!

Answer 1

确保父元素具有 position: relative 并将您的代码(要居中的子元素)更改为 position: absolute。这应该是诀窍。另请查看 this关于 CSS 居中的文章。希望这对您有所帮助!