3个图片居中对齐 css

在Web开发中，居中对齐元素是一个很常见的需求。本文将介绍3种不同的方法来实现3个图片的居中对齐。

/* 第一种方法：使用 text-align */

.container {
  text-align: center;
}

.container img {
  display: inline-block;
}

第一种方法是使用 text-align 属性，这可以使所有内联元素相对于其父容器居中。此时，我们把图片用 display: inline-block 设置为内联元素。这样，三个图片就会水平居中显示。

/* 第二种方法：使用 margin */

.container {
  position: relative;
}

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

第二种方法是使用 margin 与 position 属性。首先，我们需要设置父容器的 position 属性为 relative。然后，对每个图片设置 position 属性为 absolute，并将其上下、左右的 margin 设置为 auto。最后，在每个图片中添加一个 transform 属性来让它们垂直居中。

/* 第三种方法：使用 flexBox */

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

.container img {
  margin: 0 10px;
}

第三种方法是使用 flexBox 布局。我们可以通过将父容器的 display 属性设置为 flex，来创建一个弹性盒子。接着，使用 justify-content 和 align-items 属性来使其子元素水平垂直居中。我们还可以通过设置图片之间的 margin 属性（如上例），让三个图片和容器之间的空隙更加协调。