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

Question

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

这是我的代码：

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

尝试演示

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

Answer 2

如果盒子是固定大小的，请使用：Demo 1。

它将图像绝对定位在框内。

还要看看这些：

演示 2

演示 3