操作方法
新建一个html文件。
在这个html代码页面上新建一个<img>标签，然后对这个<img>标签引入一个图片路径，最后创建一个class类。如图： 代码：<img src="images/22.png" alt="" class="img-center"/>
对class设置css样式。 在<title>标签后面新建一个<style>标签，然后在<style>标签里设置img-center这个类的样式为： 1.绝对定位，上下左右的距离为0； 2.外边框为自动。 代码： .img-center{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
保存html文件后使用浏览器打开即可看到图片已经垂直水平居中了。
所有代码。可以直接把所有代码复制到新建的html文件上，保存后即可看到效果。（案例中使用的图片路径是自己电脑上的路径，粘贴时需要修改图片路径）。 所有代码： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片自动水平垂直居中</title> <style type="text/css"> .img-center{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 300px; } </style> </head> <body> <img src="images/22.png" alt="" class="img-center"/> </body></html>