经常写HTML的朋友，肯定都遇到过这样一个问题，如何让两张图并列居中显示，小编总结了以下方法供参考使用，直接用css实现。工具/原料moreVisual Studio Code编辑器Dreamweaver两张图片方法/步骤1/8分步阅读

打开Visual Studio Code编辑器，小编已准备好实现效果的编辑环境，如图所示

2/8

首先，先对两张图片的外部div做下布局，可以在style中定义内嵌样式，这里定义div的名称为containder

3/8

然后定义两张图片的css样式，小编定义img的宽高分别为300px，当然你也可以根据自己的要求来定义，然后在html中插入img标签

4/8

预览下html的效果，可以看到，img图片并没有相对外部的container这个div为水平居中状态，该如何解决呢

5/8

返回到container样式中，增加两个非常关键的样式，分别是【justify-content: center】和【display: flex】两个属性

6/8

普及下这个属性的常识，justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，而采用Flex容器布局，将会带有水平的主轴（main axis）和垂直的交叉轴（cross axis），所有的子元素将都包含在这个容器当中

7/8

增加完这两个样式之后，预览下html效果，就会看到两个img图片已经自动居中了

8/8

为了让两个图片更美观一些，最后可以再完善一下，给img设置下离顶部的间距，增加属性margin-top:50px，这样图片显示就更美观了

CSSDIV布局CSS常识HTML知识