Как центрировать изображение в гибком элементе (ячейке)

Question

У меня есть flexx 3x3 со значком и названием в каждом элементе/ячейке. Я просто пытаюсь горизонтально центрировать значок (изображение svg). Я пробовал justify-content: center;, но он не работает. Может ли кто-нибудь сказать мне, как горизонтально центрировать изображение внутри элемента flexbox (или ячейки, поскольку я имею в виду его как)? Код ниже.

HTML:

<div class="grid"> 
    <div class="cell"> 
     <img src="images/cs_icon_01.svg"> 
     <div class="service-title">Materials Handling, Warehousing &amp; Storage Facility Management</div> 
    </div> 
    <div class="cell">Content</div> 
    <div class="cell">Content</div> 
    <div class="cell">Content</div> 
    <div class="cell">Content</div> 
    <div class="cell">Content</div> 
    <div class="cell">Content</div> 
    <div class="cell">Content</div> 
    <div class="cell">Content</div> 
</div> 

CSS:

.grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    margin-bottom: 130px; 
} 

.cell { 
    flex: 0 0 30%; 
    height: 220px; 
    margin-bottom: 20px; 
    justify-content: center; 
} 

.grid img { 
    width: 45px; 
} 

.service-title { 
    display: inline-block; 
    font-family: Montserrat, Helvetica, Arial, sans-serif; 
    font-size: 16px; 
    font-weight: 300; 
    color: #4e4e4e; 
    line-height: 24px; 
    padding: 20px 16px 4px 16px; 
    text-align: center; 
} 

Answer 1

вы можете дать попробовать к классическим display + margin:

.grid img { 
    width: 45px; 
    display:block; 
    margin:auto;/* horizontal center effect */ 
} 

или использовать выравнивание текста:

.cell { 
    flex: 0 0 30%; 
    height: 220px; 
    margin-bottom: 20px; 
    /*justify-content*/ text-align: center; 
} 

Answer 2

easyest путь будет <center><img src="images/cs_icon_01.svg"></center> :)

скрипку: https://jsfiddle.net/p10cokw9/