[分享]css中flex居中显示图片

CSS中的flex布局非常方便地帮助我们实现了网页布局的简便操作。其中最常用的一个功能是居中显示图片。

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

.container img {
  max-width: 100%;
  max-height: 100%;
} 

在上述代码中，我们首先创建了一个container容器，并将其设置为flex布局。然后我们使用了justify-content和align-items两个属性，前者表示在容器的主轴方向上依据给定的值来对齐其中的子元素（这里的值是center），后者表示在交叉轴方向上同理。这样我们就可以让容器中的子元素居中显示了。

然后我们使用了一个子元素img来承载需要显示的图片，其中max-width和max-height属性用来设置图片的最大宽度和最大高度，这样可以防止图片在缩放的时候失真。

这样一来，我们便可以使用CSS的flex布局简单地实现图片的居中显示。而且这种方法还非常适用于响应式网页设计中的图片布局。