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

Question

我已经编写了一些代码，当我点击图像时，它会淡出并淡入一个应该垂直对齐的新div。我使用的代码与原来为vertical-align: middle的徽标相同，所以我没有看到问题。

我目前使用的代码是：

position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;

以下是我的代码部分的JSFiddle：http://jsfiddle.net/L79kte39/

Answer 1

CSS中的垂直对齐可能很棘手。这是一篇很好的文章，当我暂时没有这样做的时候我会回去：

• http://phrogz.net/css/vertical-align/

显然（读作：据说），CSS已经被广泛采用，以便以下工作普遍：

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

Source

Answer 2

这是我的版本。它使用vertical-align ...有很多曲折。它不使用变换，或任何精确的像素宽度。它确实使用了一个额外的容器。

关键是：

.cod-valign:before {
    content: '';
    display: inline-block;
        height: 100%;
        vertical-align: middle;
}

创建一个空的内联块，伪造垂直对齐（用于文本行字符放置），使其认为当前文本行包含一个0字符，100％-tall字符串，位于div的中心。然后，通过设置vertical-align，下一个元素在它旁边对齐。 （我以同样的方式应用图像）

这很棘手，但如果您记得vertical-align首先用于以正确的方式对齐文本行中的大字符，那么可能更容易理解。 （即，如果书章的第一个字母很大，那么文本的其余部分是否位于其顶部或底部？）

http://jsfiddle.net/7qtLLakq/

Answer 3

#cod-options需要一个高度，让它以徽标居中的方式居中。试试height:200px