[分享]css中如何给图片设置居中

CSS是网页设计中重要的一部分，给图片设置居中是常见的需求，下面介绍如何通过CSS实现图片居中的效果。img{ display:block;//将图片设置为块级元素 margin:0 auto;//上...

CSS是网页设计中重要的一部分，给图片设置居中是常见的需求，下面介绍如何通过CSS实现图片居中的效果。

img{
  display:block;//将图片设置为块级元素
  margin:0 auto;//上下无需设置，左右居中
  } 

上述代码中，img是CSS选择器，display:block;将图片设置为块级元素，margin:0 auto;将图片左右居中。如果想将图片上下居中，可以使用下列代码：

div{
  display:flex;
  justify-content:center;
  align-items:center;
}
div img{
  margin:0;
} 

上述代码中，div是CSS选择器，display:flex;将div设置为弹性盒子，justify-content:center; align-items:center;将图片居中，div img{margin:0;}将图片的margin设置为0，这样可以避免在某些情况下出现间距。

以上就是CSS中给图片设置居中的方法，需要注意的是不同的居中方式适用于不同的情况，可以按照实际需求进行选择。