Html 显示flex在IE中不工作

我正在尝试使用

display:flex对
中的图像进行中心对齐

这在Edge、Firefox和Chrome上运行良好，但在IE上则不行

CSS：

.horizontal {
    display: flex;
    justify-content: center;
}

.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

在这里拉小提琴：

产生Edge、chrome和Firefox

导致IE

只有IE 11部分支持flexbox

在IE上，您可以使用
display:table用于父级和
显示：表格单元格
用于垂直对齐
的儿童：中间

.horizontal {
  display: table;
  width: 100%;
  text-align: center;
}

.vertical {
  display: table-cell;
  vertical-align: middle;
}

从
img
中删除
img responsive
CSS类，并添加
vertical

.horizontal {
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.vertical {
  vertical-align: middle;
  max-height: 150px;
  max-width: 100%;
}

更新的
您可以尝试在%@JeysinghAnbu中显示宽度为的内联块。当您遇到IE问题时，您可以尝试这样做，您应该说什么版本。您预期的结果是什么？我在IE10上测试了这个，img是垂直对齐的@Mohammed Reza，谢谢，现在宽度合适了。但是当我改变高度时，两个都是不同的高度。期望值和期望值在同一高度。我在这里附上了小提琴@JeysinghAnbu，你想在盒子或图片上显示相同的高度吗？图片应该是相同的高度