我试图使用flex简单的垂直居中img内部div,但它在每个浏览器中的工作方式不同.
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: flex-start;
}
.flex-item {
height: 222px;
width: 200px;
border: 1px solid lightgray;
padding: 5px;
margin: 5px;
}
.flex-item img {
max-width: 100%;
max-height: 100%;
align-self: center;
-webkit-align-self: center;
margin: auto;
}
.item-image {
border: 1px solid lightgray;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 190px;
height: 120px; …