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

我尝试在父div中使用

display:table

，在子div中使用

display:table cell

，如图所示，但我似乎无法使图像垂直对齐。我做错了什么

这是我的密码：

HTML:

提前谢谢。

试试看

​
.桌子{
显示：表格；
浮动：左；
宽度：378px；
高度：400px；
背景色：#eaeaea；
}
.表格>分区{
显示：表格单元格；
垂直对齐：中间对齐；
}​

试试看

​
.桌子{
显示：表格；
浮动：左；
宽度：378px；
高度：400px；
背景色：#eaeaea；
}
.表格>分区{
显示：表格单元格；
垂直对齐：中间对齐；
}​

如果框大小固定，请使用以下选项：

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

请看这些：

---

如果盒子大小固定，请使用以下选项：

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

请看这些：

---

快速提问，因为我有点困惑：为什么这能起作用，而原来的不行？（如果将外部div简单地设置为

display:table

，而包含浮点数、宽度等的内部div无法正常工作，那么为什么这会起作用？@Nightfirecat

vertical align

适用于声明它的元素的子元素。你说的是“让我所有的孩子中间对齐”，而不是“让我中间对齐”。@SperanskyDanil我不是提问者，我是另一个认为你的答案需要澄清的人，因为我不明白为什么它会起作用。快速问一个问题，因为我有点困惑：为什么这会起作用，而原来的不起作用？（如果将外部div简单地设置为

display:table

，而包含浮点数、宽度等的内部div无法正常工作，那么为什么这会起作用？@Nightfirecat

vertical align

适用于声明它的元素的子元素。你说的是“让我所有的孩子中间对齐”，而不是“让我中间对齐”。@SperanskyDanil我不是提问者，我是另一个认为你的答案需要澄清的人，因为我不明白它为什么起作用。盒子里还有什么？可能会有一个更向后兼容的解决方案，例如，将在IE中一直工作到版本7。@ShaquinTrifonoff只是图像框中还有什么？可能有一个更向后兼容的解决方案，例如，将在IE中一直工作到版本7。@ShaquinTrifonoff只是图像

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

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

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