你们好，最近小元发现有诸多的小伙伴们对于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

以上就是css图片居中这篇文章的一些介绍，希望对大家有所帮助。