css样式——图片居中在正方形中

近日做需求，有一个为了让图片显示好看的需求，就是占位的div是矩形的，里面图片要居中：

<div style="border:1px solid #ddd;height:150px;width:150px; display: flex;justify-content: center;align-items: center;  " >
        <img  src="https://csdnimg.cn/cdn/content-toolbar/csdn-logo.png?v=20200416.1" alt="" style="max-width:150px;max-height:150px;">
</div>

显示效果如图：

如果是扁的图，就横向撑满垂直居中；如果是竖的图，则纵向撑满水平居中。

特此记录，以备以后使用！~