CSS img居中怎么设置

1. 概述

当在网页中使用 <img> 标签插入图片时，默认情况下图片是左对齐的，如果想要将图片居中显示，可以使用CSS来进行样式设置。本文将详细介绍如何使用CSS来实现图片的居中显示。

2. 方法一：使用text-align属性居中

<style>
    .center {
        text-align: center;
    }
</style>

<div class="center">
    <img src="example.jpg" alt="示例图片">
</div>

上述代码中，使用了一个名为 .center 的样式类，通过设置该样式类的 text-align 属性为 center，可以将其中的子元素居中显示。在这里，我们将 <img> 标签放在一个 <div> 容器中，然后将该容器的样式类设置为 .center，从而实现图片的居中显示。

3. 方法二：使用margin属性居中

<style>
    .center {
        margin: 0 auto;
        display: block;
    }
</style>

<img class="center" src="example.jpg" alt="示例图片">

上述代码中，我们通过设置 .center 样式类的 margin 属性为 0 auto，可以将其中的元素水平居中显示。同时，为了保证该元素的居中效果生效，需要将其 display 属性设置为 block。

4. 方法三：使用flex布局居中

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<div class="container">
    <img src="example.jpg" alt="示例图片">
</div>

上述代码中，我们创建了一个名为 .container 的容器，并通过设置其样式类的 display 属性为 flex，可以将容器中的元素以弹性盒模型进行布局。然后，通过设置 justify-content 属性为 center，来实现容器内元素的水平居中；通过设置 align-items 属性为 center，来实现容器内元素的垂直居中。

5. 方法四：使用position属性居中

<style>
    .container {
        position: relative;
    }
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
</style>

<div class="container">
    <img class="center" src="example.jpg" alt="示例图片">
</div>

上述代码中，我们首先为包含图片的容器设置了一个 .container 的样式类，并将其 position 属性设置为 relative，从而为后续绝对定位提供一个相对参照。然后，为图片添加了一个 .center 的样式类，并将其 position 属性设置为 absolute，使其脱离文档流。接下来，通过 top: 50% 和 left: 50% 将图片的左上角定位于容器的中心位置。最后，通过使用 transform: translate(-50%, -50%)，将图片向左上角平移自身宽度和高度的一半，从而实现图片的居中显示。