[分享]css中怎么把图片设置居中

CSS中怎么把图片设置居中在网页设计中，图片是一个不可缺少的元素，而如何让图片在页面中居中显示便成为了一个必须要解决的问题。下面，本文将介绍在CSS中怎么把图片设置居中的方法。方法一：使用CSS居中我...

CSS中怎么把图片设置居中
在网页设计中，图片是一个不可缺少的元素，而如何让图片在页面中居中显示便成为了一个必须要解决的问题。下面，本文将介绍在CSS中怎么把图片设置居中的方法。
方法一：使用CSS居中
我们可以通过CSS中的text-align属性来让图片居中对齐。

p {
  text-align: center;
}
img {
  display: inline-block;
} 

我们在p标签中设置了text-align:center属性，这表示让其内部的内容居中对齐。接着，我们对图片img标签设置了display:inline-block属性，这样图片就成为了一个行内块元素。具体地说，display属性可以实现以下几点作用：
- 将元素改变为行内块元素；
- 允许我们在外部设置元素的宽高，并且与其他行内块元素垂直对齐。
接下来，我们就可以将图片放在p标签内，实现图片居中的效果。
方法二：使用Flexbox居中
Flexbox也是一种常用的CSS布局方式，它可以通过flex属性来实现元素的居中布局。

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

我们首先对一个包含图片元素的容器wrapper设置了display:flex属性，这样容器内的元素就可以通过它们的flex属性实现居中对齐。
接着，我们将容器内元素的水平和垂直方向的居中对齐分别通过justify-content和align-items属性来设置。它们分别表示：
- justify-content：水平方向居中对齐；
- align-items：垂直方向居中对齐。
最后，我们在这个容器input内加入图片img元素即可。
总结
CSS中有多种实现图片居中对齐的方法，本文介绍了CSS和Flexbox两种较常用的方式。根据页面的布局情况和需求，我们可以选择适合的方法来实现图片的居中显示效果。