[分享]css3图片水平垂直居中对齐

CSS3中实现图片水平垂直居中对齐非常简单。我们可以使用属性和transform属性来实现这个效果。首先，让我们创建一个div元素，并在其中放入我们的图片： 接下来，我们将设置我们的CSS样式，让...

CSS3中实现图片水平垂直居中对齐非常简单。我们可以使用position属性和transform属性来实现这个效果。

首先，让我们创建一个div元素，并在其中放入我们的图片：

<div class="container">
  <img src="example.jpg" alt="Example">
</div> 

接下来，我们将设置我们的CSS样式，让我们的图片水平垂直居中：

.container {
  position: relative;
}

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

在上面的代码中，我们将容器div的position属性设置为relative，这样图片元素的position属性就可以使用相对父元素定位。接着，我们将图片元素的position属性设置为absolute，这样我们就可以根据容器元素的位置来定位图片元素。

接下来，我们将图片元素的top属性和left属性设置为50%，这样图片元素的左上角就距离容器元素的左上角相等的距离。然后，我们使用transform属性中的translate()函数将图片元素向左移动自身宽度的50%、向上移动自身高度的50%，这样图片元素就水平垂直居中对齐了。

这就是如何使用CSS3实现图片水平垂直居中对齐的全部步骤了。希望这篇文章能够对您有所帮助。