I need to simply vertically center an img in a div...however, the main parent is a flex and ignores vertical align middle, as well as justify content and align self rules.

Consider the situation below:

```css
.flex-box {
  display: flex;
  flex-flow: row wrap;
}

.box {
  border: 2px solid red;
  height: 500px;

  display: table-cell;
  vertical-align: middle;
}
```

```html
<div class="flex-box">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
</div>
```

Answers such as [Why I can't set vertical-align middle for img tag](https://stackoverflow.com/questions/58959763/why-i-cant-set-vertical-align-middle-for-img-tag) and [How to vertically center an image inside of a div element in HTML using CSS?](https://stackoverflow.com/questions/2237636/how-to-vertically-center-an-image-inside-of-a-div-element-in-html-using-css) aren't helpful because flexbox is not involved.

When I do:

```css
.flex-box {
  display: flex;
  flex-flow: row wrap;
}

.box {
  border: 2px solid red;
  height: 500px;

  display: table-cell;
  vertical-align: middle;
}

.box img {
align-self: center;
}
```

```html
<div class="flex-box">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" style="width: 100px;" />
</div>
</div>
```

here I was expecting `align-self: center` to do it. but for some reason it doesn't <https://developer.mozilla.org/en-US/docs/Web/CSS/align-self>

How do you vertically center an image, an a div, where the main parent is flexbox?