CSS解决页面图片水平垂直居中问题的方法

CSS解决页面图片水平垂直居中问题是Web开发中常见的需求，那么该怎样解决呢？以下是完整攻略：

方法一：使用绝对定位和负边距

我们可以使用绝对定位将图片的左上角定位在父元素的正中间，再使用负边距将图片向中心移动，从而实现水平垂直居中。示例代码如下：

<div class="container">
  <img src="image.jpg" alt="图片">
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
}

在示例代码中，我们在父元素（.container）中使用了相对定位。然后，我们使用绝对定位将子元素（img）定位在父元素中心。img的宽高为100px，因此我们使用负边距抵消宽高带来的偏移，使之水平垂直居中。

方法二：使用Flex布局

到了CSS3时期，在父元素中使用flexbox布局是一种更好的解决方案，它可以让网站更加具有响应性和灵活性。示例代码如下：

<div class="container">
  <img src="image.jpg" alt="图片">
</div>

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

img {
  width: 100px;
  height: 100px;
}

在示例代码中，我们将 .container 设置为显示flex，并使用justify-content和align-items属性将子元素居中。img的宽高为100px，这里没有设置margin值，Flex布局会自动使之水平垂直居中。

无论使用哪种方法，我们都可以实现页面图片的水平垂直居中。其中，Flex布局是更优的解决方案，因为它不需要手动计算负边距的值，而且具有更好的响应性和灵活性。