html - 尽管使用了表格和表格单元格，但图像并未垂直居中

Question

我尝试在父 div 中使用 display: table 并在子 div 中使用 display: table-cell，如 here 所示但我似乎无法让图像垂直对齐。我做错了什么？

这是我的代码:

HTML:

<div class="body_splash">
<img src="https://upload.wikimedia.org/wikipedia/
commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/> 
</div>​

CSS:

.body_splash {
    width: 378px;
    float: left;
    display:table;
    height: 400px;
    background-color: #eaeaea;
}
.body_splash img {
    display: table-cell;
    vertical-align: middle;
}​

提前致谢。

Answer 1

尝试 DEMO

<div class="table">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/> 
  </div>
</div>​

.table {
  display: table;
  float: left;
  width: 378px;
  height: 400px;
  background-color: #eaeaea;
}

.table > div {
    display: table-cell;
    vertical-align: middle;
}​