css图片如何并排显示,CSS如何实现每两个图片并列居中

有一个div包裹住4个a标签，每个a标签下有一个img，请问怎么实现每两个图片并列居中？a标签中的数据是从后端读取出来的，所以没法儿做成两个div

.parent {

margin: 20px auto;

position: relative;

float: left;

left: 50%;

}

.parent a {

text-align: center;

position: relative;

left: -50%;

line-height: 200px;

}

.parent a img {

vertical-align: -webkit-baseline-middle;

width: 15vw;

height: 22.1875vw;

}

尝试了把div这个父级块元素居中，margin:0 auto;但是里面的元素float:left;的时候，就4个图片全部跑到左边了

把行内元素a变为display:block;也没法儿继承父级元素的居中

尝试过把父元素line-height:500px;height:500;整个居中，但是不能影响到下面的子集元素居中

实在不知道怎么做了，求解答，谢谢！