css如何设置图片垂直居中

2025-10-27 18:18:37

1、新建一个html文件，在这个html文件上创建一个<img>标签，然后对这个标签设置图片路径，最后为这个标签添加一个类（案例中类为：img-center）

css如何设置图片垂直居中

2、对img-center类设置样式。

1.设置positon定位为绝对定位，上下左右的距离都为：0；

2.设置这个类的外编辑为：auto。

代码：

.img-center{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 300px; }

css如何设置图片垂直居中

3、保存html文件后，使用浏览器打开，即可看到图片自动居中。

css如何设置图片垂直居中

4、所有代码。可以直接复制所有代码，粘贴后运行即可看到效果。

所有代码：

<!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; } </style> </head> <body> <img src="images/22.png" alt="" class="img-center"/> </body></html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。