Problem mit middle bei mittlerem flexbox Element (?)

[JQerleger]

Hallo, ich versuche in einer kleinen flebox-Tabelle, im mittleren Element, ein img vertical und horizontal zu zentrieren. Aber ich komme einfach nicht weiter.

box {
  display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
  flex-direction: column;
  text-align: center;
}
box h2 {
	color: black;
	font-size: 1.2em;
    
}
test:nth-child(1) {
	background: red;
}
test:nth-child(2) {
	background: green;
	height: 220px;
}
bild {
  display: inline;
  vertical-align: middle;
}
test:nth-child(3) {
	background: blue;
}

<main>
<box>
	<test>
		<h2>1</h2>
	</test>
	<test>
    <bild class="img">
		  <img src="Reif_und_Hochsitz.jpg">
	  </bild>
  </test>
	<test>
		5<br>6<br>7
    </test>
</box>
</main>

Die Bilder sind immer gleich breit, aber verschieden hoch, daher hab ich child(2) die feste Höhe gegeben.

Für Lösungsvorschläge und Balgen vor den Augen wegschieben bin ich Dankbar