[分享]css中导入的图片如何居中

CSS中导入的图片，如果图片宽度小于容器宽度，如何使其居中呢？以下是一些实用的方法。

/* 方法一：使用flexbox */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 方法二：使用text-align属性 */
.container {
  text-align: center;
}

.container img {
  display: inline-block;
}

/* 方法三：使用绝对定位 */
.container {
  position: relative;
}

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

以上方法都可以实现将图片水平垂直居中。

方法一使用了CSS的flexbox布局，通过设置父容器display属性为flex，并且justify-content和align-items属性都设为center，可以将子元素（即图片）居中。

方法二则使用了text-align属性，将父容器的text-align属性设为center，将图片的display属性设为inline-block，使得图片将作为文本居中对齐，实现居中效果。

方法三使用了绝对定位，将图片定位在父容器的中心点，通过设置top和left属性为50%，并且使用transform属性来再次调整图片的位置，实现居中效果。

以上方法都是实现图片居中的常用方法，可以根据具体业务场景灵活运用。