CSS flexbox垂直/水平中心图像没有明确定义父高度

Question

如下所示仅父div和子img元素，如何垂直和水平居中{{1} } strong 明确不定义父img的{​​{1}}？

height

我对flexbox不太熟悉，所以如果flexbox本身填满整个高度，但没有任何其他不相关的属性，我没关系。

Answer 1

只需将以下规则添加到父元素：

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

这是一个 sample demo （调整图片大小的窗口对齐）

现在，Flexbox的

Browser support非常好。

对于display: flex和align-items的跨浏览器兼容性，您也可以添加较旧的flexbox语法：

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

Answer 2

如果没有明确定义我确定的height，我需要将flex值应用于父和祖父母div元素......

<div style="display: flex;">
<div style="display: flex;">
 <img alt="No, he'll be an engineer." src="theknack.png" style="margin: auto;" />
</div>
</div>