[分享]css中如何实现图片居中

CSS中如何实现图片居中呢？下面我们来了解一下。

/*方法一：使用text-align属性*/

.center{
  text-align:center;
}

/*方法二：使用margin属性*/

.center{
  margin: 0 auto;
}

/*方法三：使用display:flex属性*/

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

.container img{
  width: 50%;
} 

方法一：使用text-align属性

text-align属性是用来设置元素的文本的水平对齐方式。包括left（左对齐）、right（右对齐）和center（居中对齐）。对于inline元素，使用文字居中的方式即可：text-align:center。

方法二：使用margin属性

我们可以通过设置图片的margin来水平居中。特别地。左右margin属性的值可以设置为“auto”，即：margin: 0 auto；这里的“auto”表示我们希望浏览器自动计算margin的值，能够让图片水平居中。

方法三：使用display:flex属性

flex布局（弹性布局）是一种响应式的布局方式，可以为子元素设置水平居中或者垂直居中。通过给父元素设置display:flex，同时设置justify-content:center和align-items:center，可以实现图片的水平和垂直居中。