css怎么设置图片位置居中

在网页设计过程中，设置图片位置是一个常见的问题，这里主要介绍三种CSS设置图片位置居中的方式：

1.使用text-align:center;将图片放在一个容器中，使用text-align:center;可以让图片水平居中，代码如下：

.container{
    text-align:center;
}
.container img{
    display:inline-block;
}

2.使用margin:auto;将图片放在一个容器中，使用margin:auto;可以让图片水平居中，代码如下：

.container{
    margin:0 auto;
    /*或者使用*/
    margin-left:auto;
    margin-right:auto;
}
.container img{
    display:block;
}

3.使用flex布局将图片放在一个容器中，使用flex布局可以让图片水平和垂直居中，代码如下：

.container{
    display:flex;
    justify-content:center;
    align-items:center;
}
.container img{
    /*这里需要设置宽高*/
}

二、使用text-align:center;实现图片水平居中

首先，我们创建一个容器，并在容器中添加一张图片：

<div class="container">
</div>

接着，使用text-align:center;将图片水平居中：

.container{
    text-align:center;
}
.container img{
    display:inline-block;
}

效果如下图所示：


三、使用margin:auto;实现图片水平居中

首先，我们创建一个容器，并在容器中添加一张图片：

<div class="container">
</div>

接着，使用margin:auto;将图片水平居中：

.container{
    margin:0 auto;
    /*或者使用*/
    margin-left:auto;
    margin-right:auto;
}
.container img{
    display:block;
}

效果如下图所示：


四、使用flex布局实现图片居中

首先，我们创建一个容器，并在容器中添加一张图片：

<div class="container">
</div>

接着，使用flex布局将图片水平和垂直居中：

.container{
    display:flex;
    justify-content:center;
    align-items:center;
}
.container img{
    /*这里需要设置宽高*/
}

效果如下图所示：


五、总结

以上三种方式可以实现图片水平居中，使用哪种方式取决于具体情况，如果只是需要水平居中，推荐使用text-align:center;或margin:auto;，如果需要水平和垂直居中，推荐使用flex布局。