在表单元格元素中水平和垂直居中

Question

我有这个结构(简化(：

<div id="outer" style="display: table-cell">
<div id ="someOtherDiv">.......</div>
<div id="inner" style="text-align: center; vertical-align: middle">
<img src="path" />
</div>
</div>

我需要IMG在垂直和水平方向上居中。

图像在屏幕中仅水平居中，但垂直居中。

我还应该添加什么来完成此操作？

当然，如果我将 BODY 设置为 100% 高度，然后将内部div 也设置为 100% 高度，它可以工作，但事实是我实际上无法为 BODY 标签添加 100% 高度，所以我只需要这样做将一些样式更改为 INNERdiv。

我认为如果 OUTERdiv 是表格单元格，理想情况下，垂直对齐样式应该有效，但它没有。事实上，在使用Firebug时，我可以看到OUTERdiv扩展到所有屏幕，而INNERdiv只占用IMG空间。

有什么建议吗？

Answer 1

...
<div id="inner" class="flexbox; align-items: center">
<img src="" class="vertical-align: middle"/>

也许对内部div 使用 flexbox 和对齐项，然后在 img 标签中垂直对齐 img。 但也要考虑设置的宽度、填充和高度，以控制图像所需的最大空间。