javascript - 调整浏览器大小时，如何将 img 标签居中放入 div 标签？

Question

我是网络开发的新手，我喜欢它，但我遇到了一个问题，我无法解决。

我真的希望我的 div 元素内的图像像这样:http://jsfiddle.net/eb51hxj1/当我调整浏览器大小时。

 <div class="divImage">
    <img id="image"> </div>
 <div>

我的代码是:

https://jsfiddle.net/a2bsarfb/

Answer 1

Flexbox 是你的 friend !

.divImage {
  display: flex;
  justify-content: center;
  align-items: center;
}

align-items 使 div 内容沿横轴居中(在本例中为垂直)，justify-content 使 div 内容沿主轴(水平)居中。

如果您愿意，可以删除一个或另一个。