1、打开Visual Studio Code编辑器，小编已准备好实现效果的编辑环境，如图所示
2、首先，先对两张图片的外部div做下布局，可以在<style>中定义内嵌样式，这里定义div的名称为containder
3、然后定义两张图片的css样式，小编定义img的宽高分别为300px，当然你也可以根据自己的要求来定义，然后在html中插入<img>标签
4、预览下html的效果，可以看到，img图片并没有相对外部的container这个div为水平居中状态，该如何解决呢
5、返回到co艘绒庳焰ntainer样式中，增加两个非常关键的样式，分别是【justify-content: center】和【display: flex】两个属性
6、普及下这个属性的常识，just坡纠课柩ify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，而采吹涡皋陕用Flex容器布局，将会带有水平的主轴（main axis）和垂直的交叉轴（cross axis），所有的子元素将都包含在这个容器当中
7、增加完这两个样式之后，预览下html效果，就会看到两个img图片已经自动居中了
8、为了让两个图片更美观一些，最后可以再完善一下，给img设置下离顶部的间距，增加属性margin-top:50px，这样图片显示就更美观了
