Image 为什么它不垂直居中？

html代码：

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

jsfiddle：

如果我更改JSFIDLE，使anks行高度为500px，并从容器中删除字体大小，它就可以工作

但是，当我将字体大小添加到500px的容器中，然后将行高度设置为100%的字体大小时，它就不起作用了。它使图像比它应该的位置低了一点

工作区：

更新：

此解决方案适合我：

---

我看到您找到了一个解决方案，但是它意味着在两个元素上手动设置高度，并且需要使用不必要的标记。 因此，我建议您检查“display:table”（容器）和“display:table cell”（内部元素）规则：

HTML

---

你试过把a的500px改成100%吗？是的，你是说锚线高度改成100%？

.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;
 }

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

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

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