Html 如何在flex项（单元格）中居中放置图像

我有一个3x3 flexbox，每个项目/单元格中都有一个图标和标题。我只是尝试水平居中图标（svg图像）。我尝试了

justify content:center但它似乎不起作用。有谁能告诉我如何在flexbox项目（或单元格，我称之为“水平居中”）中水平居中图像？代码如下

HTML:

您可以尝试使用经典的
显示
+
边距
：

.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;
}

什么…！我确信我已经试过了。我想没有——它成功了！谢谢。我们称它们为“元素”，而不是“项目”，或者更糟的是，“细胞”，这让人想起了表格。Flex'ed元素及其内容是标准的HTML元素。谢谢Rob。我在flexbox的一篇文章中读到它是container>items。可能只是作者的措辞。我只是用细胞来弄清楚什么是以什么为中心的。
.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;
}