为什么我的div不会垂直对齐？

Question

我字面上隐喻地到处看，我似乎仍然无法让它发挥作用..

我之前在Microsoft Edge上编程看起来很好，并且运行良好..但是当我上传它并且人们开始使用chrome，firefox等...它会这样做：

这是我用来对齐它的代码：

position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

这是JSFiddle，可以更好地概述我正在做的事情：http://jsfiddle.net/wc1f8ewd/

（编辑）点击鳕鱼标志或联盟标志以查看问题

Answer 1

要使此垂直对齐技巧起作用，您需要指定容器的高度。添加：

.cod-main, .league-main {
    height: 100%;
}

Answer 2

您正在使用相对定位的div top: 50%;，这将使其相对div的高度的50％而不是包裹元素。

将其更改为绝对位置并应用相同的left: 50%和转换属性。

更新你的小提琴。 http://jsfiddle.net/wc1f8ewd/1/

    .cod-options {
        display: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        position: absolute;
}