[分享]css中如何让一个图片居中

在 CSS 中，有多种方法让一个图片居中。一种方法是使用 margin 属性。可以将图片的 margin 设为 auto，同时将其 display 属性设为 block，这样就可以让图片在其容器中水平...

在 CSS 中，有多种方法让一个图片居中。
一种方法是使用 margin 属性。可以将图片的 margin 设为 auto，同时将其 display 属性设为 block，这样就可以让图片在其容器中水平居中。
另外一种方法是使用 flexbox，将图片的容器的 display 设为 flex，然后使用 justify-content 和 align-items 属性将图片居中。
下面是使用 margin 和 flexbox 方法分别实现图片居中的示例代码：
使用 margin 方法：

p {
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
} 

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

img {
  display: block;
}