在CSS中居中图片是我们在写web时经常需要实现的需求，本文简单的总结几种在css如何使图片居中显示的方式。

1 text-align居中

图片标签img是一个内联元素，而text-align属性居中只对块级元素有效，所以我们需要使用div包含img，然后设置这个div的text-align属性为center，就可以让图片居中显示了。

如

<div>
    <img src="text.png" alt="图片" />
</div>

css设置如下

div {
    text-align: center;
}

2 Flex居中图片

对于第1节中的

<div>
    <img src="text.png" alt="图片" />
</div>

我们也可以使用flex，我们可以将css设置如下

div {
    display: flex;
    justify-content: center;
}

上述css可以让图片水平居中显示，如果想要图片垂直居中，则需要将align-items设置为center，如

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

3 Grid居中图片

对于第1节中的

<div>
    <img src="text.png" alt="图片" />
</div>

我们还可以使用Grid将图片居中，如

div {
    display: grid;
    place-items: center;
}

上述place-items的值为center时，在水平方向和垂直方向都是居中的。

4 使用margin属性将图片居中

如果img不被div所包含我们也可以为图片设置自动的左右边距来使其居中。但是和 text-align 属性一样，margin 属性只对块级元素有效。所以我们必须先将img转换称为块级元素，然后再设置其margin属性，如

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

在这个基础上我们也可以为图片增加width属性，用于控制图片显示的宽度

img {
    display: block;
    margin: 0 auto;
    width: 60%;
}