css照片居中怎么写

在网页设计中，美观的图片排版是非常重要的。其中一个常见的问题就是如何让图片水平和垂直居中。在CSS中，有多种方法可以实现这一效果。
使用margin属性
可以通过margin属性来让图片水平和垂直居中。首先，需要将图片包裹在一个容器div中。然后，将容器的宽度和高度设置为和图片一样的大小。最后，使用CSS将容器的margin属性设置为“auto”，即可实现图片居中的效果。
示例代码：

div {
  width: 300px;
  height: 300px;
  margin: auto;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
 

使用flexbox
flexbox是CSS中一个强大的布局模型，可以用来实现各种复杂的排版效果，其中也包括图片的水平和垂直居中。同样需要将图片包裹在一个容器div中。然后，使用CSS将容器的display属性设置为“flex”，并添加一些flexbox的样式，即可实现图片居中的效果。
示例代码：

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
 

通过这两种方法，我们可以轻松地实现图片的水平和垂直居中效果，让我们的网页更加美观和专业。