[分享]css中怎么写图片的上下居中

在CSS中，实现图片的上下居中是一个常见的问题。当我们需要在网页中添加图片时，很多时候我们希望它能够居中显示。本文将介绍几种实现图片上下居中的方法。首先，我们可以通过设置图片的display属性为bl...

在CSS中，实现图片的上下居中是一个常见的问题。当我们需要在网页中添加图片时，很多时候我们希望它能够居中显示。本文将介绍几种实现图片上下居中的方法。
首先，我们可以通过设置图片的display属性为block，再设置其margin属性来使其在垂直方向上居中。示例代码如下：

img {
  display: block;
  margin: auto;
} 

该代码会使图片在垂直方向上居中显示，但是不会使其水平方向上居中。
其次，我们可以使用flexbox布局来实现图片的上下居中。我们只需要将图片所在的容器设置为flex容器，再设置其align-items属性为center即可。示例代码如下：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container img {
  max-width: 100%;
  max-height: 100%;
} 

该代码会使容器和图片都在垂直和水平方向上居中显示。
最后，我们也可以使用Grid布局来实现图片的上下居中。我们只需要将图片所在的容器设置为grid容器，再设置其justify-items和align-items属性为center即可。示例代码如下：

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

.container img {
  max-width: 100%;
  max-height: 100%;
} 

该代码会使容器和图片都在垂直和水平方向上居中显示。
总结来说，实现图片的上下居中可以通过设置图片的display和margin属性、使用flexbox布局和使用Grid布局等多种方法来实现，可以根据具体情况选择最合适的方法来实现。