List image on center css code

List  image on center css code

HTML CODE

 <div class="flex-item">
          <img src="images/mclaren.png" class="img-responsive" />
 </div>

.flex-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;
    border: 1px solid black;
    background-color: #eee;
}

For cross-browser compatibility for display: flex and align-items, you can add the older flexbox syntax as well:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

shahzad_samejo@yahoo.com