宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

在网页设计中，经常需要对图片进行布局，常见的需求是让图片居中对齐。本文将从多个方面详细阐述CSS图片居中对齐的实现方法。

一、水平居中对齐

水平居中对齐是指让图片在水平方向上居中显示。其中，使用CSS实现水平居中对齐的方法有：使用margin将图片居中，使用text-align属性将图片居中。

1. 使用margin将图片居中

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

其中，display:block;表示将图片设置为块级元素，margin:0 auto;表示让左右外边距都为auto，这样就可以使图片自己居中。

2. 使用text-align属性将图片居中

.container{
  text-align:center;
}
.container img{
  display:inline-block;/*若图片不是块级元素，则需要设置为内联块*/
}

其中，text-align:center;表示将元素的文本内容居中，display:inline-block;表示将图片设置为内联块元素，这样就可以垂直居中。

二、垂直居中对齐

垂直居中对齐是指让图片在垂直方向上居中显示。其中，使用CSS实现垂直居中对齐的方法有：使用flexbox布局实现图片垂直居中，使用table-cell布局实现图片垂直居中。

1. 使用flexbox布局实现图片垂直居中

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

其中，display:flex;表示使用flexbox布局，align-items:center;表示使容器的项目垂直居中对齐，justify-content:center;表示使容器的项目水平居中对齐。

2. 使用table-cell布局实现图片垂直居中

.container{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
.container img{
  display:inline-block;
  vertical-align:middle;
}

其中，display:table-cell;表示将容器设置为表格单元格，vertical-align:middle;表示将表格单元格垂直居中，text-align:center;表示将表格单元格水平居中，display:inline-block;表示将图片设置为内联块元素，vertical-align:middle;表示将内联块元素垂直居中。

三、水平与垂直居中对齐

水平与垂直居中对齐是指让图片在水平方向与垂直方向上同时居中显示。其中，使用CSS实现水平与垂直居中对齐的方法有：使用绝对定位实现图片居中对齐。

1. 使用绝对定位实现图片居中对齐

.container{
  position:relative;
}
.container img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

其中，position:relative;表示将容器设置为相对定位，position:absolute;表示将图片设置为绝对定位，top:50%; left:50%;表示将图片的顶部与左侧各移动容器高度和宽度的50%，使其居中，transform:translate(-50%,-50%);表示将图片向左、向上移动自身高度和宽度的50%，再次将图片居中。