为什么我的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%);
}

资源

Answer 2

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

关键是这样的：

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

这会创建一个空的内联块，该块伪造了垂直对齐（表示文本行字符放置），以为当前文本行在div的中心包含一个0字符，高100％的字符串。 然后，通过设置垂直对齐，将下一个元素与其对齐。 （我以相同的方式应用了图像）

这很棘手，但是如果您记得vertical-align最初是用于以正确的方式对齐一行文本中的大字符之类的东西，则可能更容易理解。 （即，如果一本书的第一个字母很大，那么文本的其余部分在其顶部还是底部？）

http://jsfiddle.net/7qtLLakq/

Answer 3

#cod-options将需要一个高度，以使其与徽标居中的方式居中。 尝试height:200px