flexboxを使って横並びにし、高さを揃え、かつaタグを上下左右中央にして親要素いっぱいにする方法

ググっても分からなかったのですが、みなさんの情報を組み合わせてなんとか実現できたので記録しておきます。

display:flex;とdisplay:table;を組み合わせるのがポイントみたいです。

html

<ul class="list"> <li class="list-item"> <a href="" class="list-item-link">aaaa</a