如何用CSS将图像居中显示在HTML页面中

一、使用text-align将行内图像居中

行内图像是通过标签插入页面中的图像，与页面上的文字混排。通常，我们可以使用text-align属性来将行内图像居中显示。text-align有两个值：center和justify。

img {
    display: inline-block;
}

.container {
    text-align: center;
}

为了在块级元素中放置行内元素，需要将图像的display属性设置为inline-block。接着，使用text-align属性将图像的父元素中央对齐即可。这个方法对于只有单个图像的情况非常适用。

二、使用margin将块级图像居中

块级图像是占据整行的元素。通过使用margin属性来实现块级图像的居中。对于已知宽度的块级图像，我们可以通过设置margin-left和margin-right来让它居中。

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

将图像的display属性设置为block，并通过margin-left和margin-right将图像在其容器中进行居中。设置margin: 0 auto;可以使浏览器自动计算左、右边距，从而实现水平居中。

三、使用position将任何类型的图像居中

position属性可以将元素相对于其定位父元素进行定位。通过将图像的position属性设置为absolute，left和right属性设置为0，top和bottom属性设置为0，我们可以实现任何类型的图像水平垂直居中。

.container {
    position: relative;
}

img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

在图像的容器中，将position属性设置为relative。接着，在图像的样式中将position属性设置为absolute，将宽度和高度设置为图像的实际宽度和高度，然后使用top，bottom，left和right属性将图像相对于其定位父元素进行定位。最后，将margin属性设置为auto，让图像在其容器的中央进行水平和垂直居中。

结论

不同类型的图像需要使用不同的技巧来进行居中。行内图像使用text-align:center，块级图像使用margin：0 auto，任何类型的图像使用position:absolute。以上这些技巧可以用CSS轻松实现图像的居中，并且不需要依赖JavaScript。