css - 垂直居中在 Firefox 中不起作用

Question

我正在使用父容器将一个 div 垂直居中。

http://danacoleproducer.com

它适用于 Safari 和 Chrome，但不适用于 Firefox。我看了这篇文章:CSS vertical-align: middle not working但我宁愿不使用表格。

我的 CSS:

.wrapper {
    height: 100%;
    max-width: 420px;
}
.wrapper:before,
.container {
    display: inline-block;
    vertical-align: middle;
}
.wrapper:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    margin-left: -0.25em;
}
.container {
    text-align: justify;
    font-size: 12px;
}

Answer 1

以下可能会成功 ;-)

.container {
position: relative;
top: 50%;
transform: translateY(-50%);
}

其中 .container 是您想要垂直居中的内容。