[分享]css3怎样图片居中对齐

CSS是前端开发中必不可少的技术，它可以很好的对页面进行样式控制。而CSS3则是CSS技术的最新版本，它在图片对齐方面也有了很大的进步。下面我们就来介绍一下CSS3如何对图片进行居中对齐。/单独一个居...

CSS是前端开发中必不可少的技术，它可以很好的对页面进行样式控制。而CSS3则是CSS技术的最新版本，它在图片对齐方面也有了很大的进步。下面我们就来介绍一下CSS3如何对图片进行居中对齐。

/*单独一个居中对齐*/
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*多个图片整体居中对齐*/
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

.child{
    margin: 20px; /*图片之间的间距*/
} 

我们可以给图片的父级元素添加较高的display属性，在具体设置相应的justify-content和align-items属性就能轻松实现单独一个图片居中对齐的效果。而如果需要对多个图片进行整体居中对齐，只需要将全部图片作为父元素的子元素，在父元素上设置相应的属性，子元素设置一定的距离即可。

总之，CSS3技术为图片居中对齐提供了更加简单实用的方式，值得前端开发人员在日常开发中加以应用。