li(リスト)タグ内の画像を中央表示(センタリング)するには

背景

liタグ内の画像を中央表示したくてtext-align:center;やvertical-align:middle;を試すもうまくいかない！

試したこと

text-align: center;やvertical-align: middle;を設定してみる。text-align: center;は効いて左右中心になるも上下は中央配置にならない。
それもそのはず、vertical-align: middle;が使えるのはインライン要素と**テーブルセル(display:table-cell;)**のみ！


<ul>
  <li><img src="" .....></li>
  <li><img src="" .....></li>
  <li><img src="" .....></li>
</ul>

ul>li{
  text-align: center;
  vertical-align: middle;
}

解決法

display:****が効くのは基本的に指定した要素の子要素まで。
そこで、中央配置にしたいimgタグの親要素であるliタグにdisplay:flex;、align-items: center;、justify-content:center;を設定。
そうすると、liタグ内の画像の中央配置ができる。

ul{
  display: flex;
  list-style: none;
}

ul>li{
  border: 1px solid black;
  display:flex;
  align-items: center;
  justify-content: center;
}