显示Flex是不是在IE

Question

使用display:flex;

即工作边做工精细，我试图做的图像居中对齐在<div class="product-image-area">，Firefox和Chrome，但不是在IE浏览器。

CSS：

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

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

小提琴这里：在边缘，镀铬JS Fiddle

结果和Firefox

结果在IE

Answer 1

删除img-responsive CSS类从img并添加vertical

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

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

更新Fiddle Here

Answer 2

只有IE 11部分支持flexbox。

在IE浏览器就可以使用儿童display: table;为家长和display: table-cell;与vertical-align: middle;

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

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