css图片居中样式怎么设置（css图片居中）
发布时间：2023-08-10 16:01:42
来源：互联网
诸多的对于css图片居中样式怎么设置，css图片居中这个问题都颇为感兴趣的，为大家梳理了下，一起往下看看吧。
1、首先我们给页面添加一张图片，代码和效果如下图所示：
2、然后我们给图片设置一个类名，方便后期操作。
(资料图)
3、然后我给图片设置了css样式，所以为了方便我直接在html页面上写css样式。
4、我们经常使用“margin: 0 auto”来实现水平居中，但我们总认为“margin: auto”无法实现垂直居中，但实际上我们只需要添加一些限制就可以达到我们的效果，即通过定位：
5、position: absolute;
6、top: 0;
7、left: 0;
8、bottom: 0;
9、right: 0;
10、设置位置，使顶部、底部、左侧和右侧都为0，然后通过边距将元素居中：0 auto。
11、设置好CSS样式后，我们可以浏览看看代码的效果，可以看到图片已经实现了。
12、最后，我会附上所有的代码给你：
13、!DOCTYPE html
14、html
15、head
16、meta charset="utf-8" /
17、使用CSS将图片水平和垂直居中/title
18、/head
19、body
20、img class="pic" src="img/timg.jpg" alt="" /
21、/body
22、style type="text/css"
23、.pic{
24、margin: auto;
25、position: absolute;
26、 top: 0;
27、 left: 0;
28、 bottom: 0;
29、 right: 0;
30、}
31、/style
32、/html
标签：
