CSS伪类是一种CSS选择器，它使您能够选择指定状态下的元素。其中一个伪类是":before"和":after"，它们可以在元素内容的前面或后面添加内容。在本文中，我们将介绍如何使用这些伪类将图片居中。

首先，我们需要创建一个包含图片的HTML元素。我们可以使用元素或背景图像实现。下面是一个使用元素的示例：

<div class="container">
<img src="your-image.png" alt="Your Image">
</div>

接下来，我们使用CSS添加:before伪类并将其定位到图片的前面，然后通过CSS属性将其内容设置为一个空内容。然后，我们将:before伪类的宽度和高度设置为100％，以覆盖整个父元素：

.container {
position: relative;
}
.container:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

然后，我们可以通过使用background属性将图片设置为:before伪类的背景，并使用background-size和background-position属性将其居中：

.container:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(your-image.png) no-repeat center center;
background-size: contain;
}

现在，图片已经成功居中了。