CSS图片响应式 垂直水平居中

CSS图片响应式垂直水平居中是前端开发中常见的需求之一，下面将详细讲解实现的完整攻略。

1. 使用CSS的transform属性实现

使用CSS的Transform属性，可以轻松实现图片的水平垂直居中。具体步骤如下：

• 设置父容器为相对定位，子容器为绝对定位；
• 子容器的top和left属性设置为50%；
• 使用Transform属性的translate(-50%,-50%)，将子元素上移与左移，达到居中的效果。

示例代码如下：

.parent {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  /* 此处使用transform属性进行水平和垂直居中 */
}

2. 使用Flexbox布局实现

使用Flexbox布局也可实现水平垂直居中图片，且更为简便。具体步骤如下：

• 父元素设置属性display: flex;，实现Flexbox布局；
• 父元素和子元素的justify-content和align-items属性都设置为center，实现水平垂直居中。

示例代码如下：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
}

.child {

}

以上是两种常见的CSS图片响应式垂直水平居中方法，使用起来非常简便。