在table-cell元素中水平和垂直居中

Posted 2021-04-07

我有这个结构（简化）：

<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％高度它可以工作，但事实是我实际上不能将100％高度添加到BODY标签，所以我需要这样做只改变INNER div的一些风格。

我想如果OUTER div是表格单元格，理想情况下，垂直对齐样式应该有效，但事实并非如此。实际上，当使用Firebug时，我可以看到OUTER div扩展到所有屏幕，而INNER div只会占用IMG空间。

有什么建议吗？

答案

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

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