CSS 实现图片居中显示的代码写法

在网页设计中，图片的居中显示是一个常见的需求。无论是水平居中还是垂直居中，或者是同时实现水平和垂直居中，CSS都提供了多种方法来满足这些需求。下面将介绍几种常见的CSS代码写法来实现图片的居中显示。

水平居中

• 使用text-align属性：当图片是行内元素或行内块级元素时，可以将其父元素的text-align属性设置为center。例如：

.parent {
  text-align: center;
}
img {
  display: inline-block;
}

这种方法适用于单个图片或多个图片在一行中水平居中的情况。

• 使用margin属性：将图片的左右margin设置为auto，同时将其设置为块级元素（display: block）。例如：

img {
  display: block;
  margin: 0 auto;
}

垂直居中

• 使用flex布局：将父元素设置为flex容器，并使用align-items属性来实现垂直居中。例如：

.parent {
  display: flex;
  align-items: center;
}

• 使用position和transform属性：当图片的高度已知时，可以使用绝对定位和transform属性来实现垂直居中。例如：

.parent {
  position: relative;
}
img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

水平和垂直同时居中

• 使用flex布局：结合justify-content和align-items属性，将父元素设置为flex容器，实现水平和垂直同时居中。例如：

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

以上就是使用CSS实现图片居中显示的几种常见代码写法。不同的方法适用于不同的场景，根据实际需求选择合适的方法可以更高效地实现图片的居中显示效果，提升网页的美观度和用户体验。