用纯CSS实现容器内图片上下左右居中

下面是用纯CSS实现容器内图片上下左右居中的攻略：

1. 居中的前提条件

在实现图片上下左右居中之前，必须满足以下两个前提条件：

1. 父容器必须拥有一定的宽度和高度；
2. 要居中的图片必须是块级元素（display: block）。

2. 水平居中

要实现图片水平居中，可以给父容器设置text-align属性为center，再将图片的display属性设置为block即可，示例代码如下：

.container {
  width: 500px;
  height: 300px;
  text-align: center;
}

.container img {
  display: block;
}

3. 垂直居中

要实现图片垂直居中，可以使用CSS3的flex布局，先将父容器设置为flex布局（display: flex），再将子元素（即图片）设置为垂直居中（align-items: center），示例代码如下：

.container {
  width: 500px;
  height: 300px;
  display: flex;
  align-items: center;
}

.container img {
  display: block;
}

4. 上下居中

要实现图片在父容器中上下居中，可以先实现水平居中，再利用绝对定位将图片上移一半的高度（即margin-top: -图片高度的一半），示例代码如下：

.container {
  width: 500px;
  height: 300px;
  text-align: center;
  position: relative;
}

.container img {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -50px; /* 假设图片高度为100px */
}

5. 左右居中

要实现图片在父容器中左右居中，可以先实现垂直居中，再利用绝对定位将图片左移一半的宽度（即margin-left: -图片宽度的一半），示例代码如下：

.container {
  width: 500px;
  height: 300px;
  display: flex;
  align-items: center;
  position: relative;
}

.container img {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -50px; /* 假设图片宽度为100px */
}

以上就是用纯CSS实现容器内图片上下左右居中的完整攻略。