JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flex-container">

  <div id="container1"></div>

  <img src="http://i.imgur.com/RRUe0Mo.png" alt="">

  <div id="container2"></div>

</div>

CSS

#flex-container{
  height: 300px;
  width: 600px;
  display: flex;
  display: -webkit-flex;
  flex-flow: column nowrap;
  -webkit-flex-flow: column nowrap;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border: 5px solid black;
}

#container1, #container2{
  height: 100px;
  width: 300px;
  background: red;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}