在日常的网页开发当中，我们常常需要显示一些图片。但是，有时候我们会发现，图片显示出来的时候不居中，要么向左靠，要么向右靠，显得很不美观。那么该如何用CSS实现图片居中显示呢？

在文章中，我们将围绕以下几个方面来介绍：

1. 实现图片水平居中

2. 实现图片垂直居中

3. 实现图片水平垂直居中

一、实现图片水平居中

实现图片水平居中，其实比较简单。我们只需要用到一个很常用的CSS属性——text-align属性。

text-align属性是用来控制文本的对齐方式的，它可以有以下几个值：

1. left——让文本左对齐

2. center——让文本居中

3. right——让文本右对齐

4. justify——让文本两端对齐

那么，我们只需要将需要居中的图片所在的容器设置text-align属性值为center即可实现图片水平居中。比如：

```css

.container {

text-align: center;

}

.container img {

display: inline-block; /* 图片如果是块状元素，则不需要这个 */

}

```

容器 .container 的 text-align 属性设置为 center，图片 img 设置了 display 属性为 inline-block。这样，图片就会水平居中了。

二、实现图片垂直居中

实现图片垂直居中，相对于实现水平居中来说要稍微麻烦一些，不过还是可以使用到一些比较常用的方法。

1. line-height + height

首先，我们可以将图片所在的容器设置一个比较大的高度，然后将该容器的 line-height 属性值设置成该容器的高度。这样，就可以实现图片在垂直方向上的居中了。比如：

```css

.container {

height: 300px;

line-height: 300px;

text-align: center;

}

.container img {

display: inline-block; /* 图片如果是块状元素，则不需要这个 */

vertical-align: middle; /* 消除图片与文本的底部间距 */

}

```

容器 .container 的 height 属性设置为 300px，line-height 属性设置为 300px，同时设置 text-align 属性为 center。图片 img 设置了 display属性为 inline-block，vertical-align属性设置为middle。这样，图片就会垂直居中了。

2. position + transform

再来看一种实现图片垂直居中的方法。我们可以将图片的 position 属性值设置为 absolute，然后同时设置 top 和 left 等属性值，来使图片在容器中居中。

```css

.container {

position: relative;

}

.container img {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%); /* 移动图片自身的宽高的一半，使其居中 */

}

```

在上面代码中，.container设置了position属性值为relative，而图片 img 设置了position属性值为absolute。top和left的值都为50%。而 transform的translate属性是将图片自身的宽高分别向左和向上移动50%，达到平移图片的目的。

三、实现图片水平垂直居中

除了实现图片水平居中和垂直居中之外，我们还可以将这两种方式结合到一起，最终实现图片水平垂直居中的效果。

在这里，我们同样可以使用到position属性和transform属性，具体实现方式如下：

```css

.container {

position: relative;

}

.container img {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%); /* 移动图片自身的宽高的一半，使其居中 */

}

```

我们同样是将图片 img 的 position 属性设置为 absolute，top 和 left 的值分别设置为 50%，然后再用 transform 属性将图片移动到居中的位置。

最后，再给大家提供一种使用flexbox实现图片水平垂直居中的方法：

```css

.container {

display: flex;

justify-content: center;

align-items: center;

}

```

这里容器 .container 设置了display属性值为flex，同时将justify-content属性和align-items属性都设置为 center。这样，图片就可以水平垂直居中了。

总结

对于图片的居中对齐，其实有很多种实现方式，本文只介绍了其中的几种常用方式。大家可以根据自己的情况以及实际需求来选择合适的方法。参考文章：[CSS 图片垂直水平居中的几种方法，大牛总结｜CSS/HTML/ JavaScript](https://segmentfault.com/a/1190000007928879)。