[分享]css中实现内容居中显示图片

CSS中有很多方法可以实现内容居中显示图片的效果。其中使用 textalign: center 属性可以将文本居中显示，使用 margin: auto 属性可以将图片水平居中显示。下面是使用这两个属性...

CSS中有很多方法可以实现内容居中显示图片的效果。其中使用 text-align: center 属性可以将文本居中显示，使用 margin: auto 属性可以将图片水平居中显示。下面是使用这两个属性实现居中显示的示例代码：

img {
  display: block;
  margin: auto;
}

p {
  text-align: center;
} 

代码中的 display: block 属性将图片设为块级元素，可以使 margin: auto 生效。而 text-align: center 属性可以使文本居中，包括图片上方和下方的文本。

如果需要实现垂直居中显示图片，可以使用 display: flex 和 align-items: center 属性。下面是示例代码：

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

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

代码中的 display: flex 属性将容器设置为弹性盒子，align-items: center 属性可以将其中的项目垂直居中。而 justify-content: center 属性可以将项目水平居中。图片设置了 max-width: 100% 和 max-height: 100% 属性，可以保证图片在容器中不超出容器的大小。

使用这些属性，可以方便地实现图片的居中显示效果，使页面布局更加美观。同时，在不同的场景下，可以根据需要使用不同的方法来实现居中显示。