How to align the two buttons to the center of a div of 'position:absolute' using flexbox?

const H = "540px";
const W = "720px";

const ContentView = ({ width, height }) => (
  <div style={{ width, height, border: "1 solid red" }}>Hello! Alt View!</div>
);

const ControlView = ({ width, height, onReveal, onCopy }) => {
  const container = {
    width,
    height,
    position: "relative"
  };
  const controlsContainer = {
    width,
    height,
    position: "absolute",
    left: 0,
    top: 0,
    border: "5px solid green",
    display: "flex"
  };
  return (
    <div style={container}>
      <img style={{ width, height }} src="https://i.imgur.com/MQcuk3n.jpg" />
      <div style={controlsContainer}>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <div>
            <button
              style={{
                width: "400px",
                height: "60px",
                minWidth: "200px",
                display: "block"
              }}
              onClick={onReveal}
            >
              Reveal
            </button>
          </div>
          <div>
            <button
              style={{ width: "400px", height: "60px", minWidth: "200px" }}
              onClick={onCopy}
            >
              Copy Meta
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { playing: false };
  }

  _onReveal() {
    this.setState({ playing: true });
  }

  _onCopy() {
    window.alert("Meta data copied");
  }

  renderAltView() {
    return <AltView />;
  }
  render() {
    const { width, height } = this.props;
    if (!this.state.playing) {
      return (
        <div>
          <h2>Controls</h2>
          <ControlView
            width={width}
            height={height}
            onReveal={() => this._onReveal()}
            onCopy={() => this._onCopy()}
          />
        </div>
      );
    }
    return (
      <div>
        <ContentView />
      </div>
    );
  }
}
ReactDOM.render(<App width={W} height={H} />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>