当需要在CSS中实现图片的居中，首先加载一张图片并为它添加一个class，方便后续样式调整。图片的居中通常通过设置"margin: 0 auto"来实现水平居中，但许多人可能忽视了垂直居中的实现方式。实际上，只需要结合定位（position: absolute;）和一些限制，例如top, left, bottom, right属性都设置为0，即可完成垂直居中。这样，即使使用了margin: 0 auto，图片也能实现上下左右的均匀居中。
下面是完整的HTML和CSS代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS图片水平垂直居中示例</title>
</head>
<body>
<img class="pic" src="img/timg.jpg" alt="" />
</body>
<style type="text/css">
.pic {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</html>
通过这段代码，图片已经成功实现了水平和垂直的居中，只需要查看浏览器效果即可验证。
温馨提示：答案为网友推荐，仅供参考
相似回答