為什么我的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