在网页设计中，图片的居中显示是提升页面美观度和用户体验的重要一环，CSS（层叠样式表）提供了多种方法来实现图片的居中，以下将详细介绍几种常见的CSS技巧,帮助您轻松实现图片的居中显示。

使用Flexbox布局

Flexbox是一种非常强大的布局工具,可以轻松实现图片的水平和垂直居中。

Flexbox容器

需要将图片的父元素设置为Flexbox容器，这可以通过添加display: flex;属性实现。

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

子元素居中

将图片设置为Flexbox容器的子元素，由于父容器已经设置了居中,图片会自动居中。

.child {
  /* 图片样式 */
}

使用Grid布局

Grid布局也是一种非常强大的布局方式,可以用于图片的居中。

Grid容器

将图片的父元素设置为Grid容器，这可以通过添加display: grid;属性实现。

.parent {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

子元素居中

同样地，将图片设置为Grid容器的子元素，由于父容器已经设置了居中,图片会自动居中。

.child {
  /* 图片样式 */
}

使用绝对定位

绝对定位可以用来将图片放置在父元素的中央。

定位图片

给图片添加绝对定位,并设置其位置为容器的中心。

.parent {
  position: relative; /* 设置相对定位 */
  width: 100%; /* 父容器宽度 */
  height: 300px; /* 父容器高度 */
}
.child {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 调整位置 */
}

调整图片大小

确保图片的大小合适,以填充父容器。

.child img {
  width: 100%; /* 图片宽度 */
  height: auto; /* 图片高度 */
}

使用Table布局

Table布局是一种较老但仍然有效的布局方式。

设置表格布局

给图片的父元素添加display: table;属性。

.parent {
  display: table;
  width: 100%; /* 父容器宽度 */
  height: 300px; /* 父容器高度 */
}

设置单元格

给图片添加display: table-cell;属性，并使用vertical-align: middle;和text-align: center;实现水平和垂直居中。

.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

图片居中

将图片设置为容器的子元素,并调整其大小。

.child img {
  width: 100%; /* 图片宽度 */
  height: auto; /* 图片高度 */
}

FAQs

Q1：Flexbox和Grid布局在性能上有何差异？

A1：Flexbox和Grid布局在现代浏览器中都有很好的性能表现，通常情况下，两者的性能差异不大，Flexbox更简单，适合处理单一方向上的布局,而Grid则更适合复杂的二维布局。

Q2：如何在图片周围添加边框？

A2：在CSS中，您可以通过为图片添加border属性来设置边框。

.child img {
  border: 2px solid #000; /* 2像素的黑色边框 */
}