为什么这不是垂直居中？

Question

HTML代码：

<div class="container"> 
    <a class="ank"> 
    <img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" /> 
    </a> 
</div> 

CSS代码：

.ank 
{ 
    display: block; 
    width: 500px; 
    height: 500px; 
    line-height: 100%; 
} 

img 
{ 
    vertical-align: middle; 
} 

.container 
{ 
    display:block; 
    width: 500px; 
    height: 500px; 
    border: 1px solid black; 
    font-size: 500px; 
} 

的jsfiddle：http://jsfiddle.net/mfBZZ/5/

如果我改变的jsfiddle，使得anks行高是500像素，并删除字体大小从容器，它的工作。

但是当我将字体大小添加到500px的容器中，然后在ank中将行高设置为该字体大小的100％时，它不起作用。它会使图像小于它应该在的位置。

工作的jsfiddle：http://jsfiddle.net/eujFY/1/

UPDATE：

该解决方案对我的作品： http://jsfiddle.net/eujFY/2/ < ----更新。

Answer 1

我见过你找到了解决方案，但它意味着在两个元素上手动设置高度，并且它需要使用不必要的标签。 所以我建议你勾选 “显示：表”（容器）和 “显示：表细胞”（内部元件）规则：http://jsfiddle.net/RxGS5/

HTML

<div class="container"> 
    <a class="ank"> 
     <img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" /> 
    </a> 
</div> 

CSS

.container 
{ 
    display:table; 
    width: 500px; 
    height: 500px; 
    border: 1px solid black; 
} 

.ank 
{ 
    display: table-cell; 
    vertical-align: middle; 
}