flexbox layout

top and center divs

HTML

<div class="flexbox-container">
  <div class="top-item">
    top
  </div>
  <div class="center-item">
    center
  </div>
</div>

CSS

body {
    height: 50vh;
    background: blue;
  }
  .top-item {
    flex: 1 0 100%;
    text-align: center;
    align-self: flex-start;
  }
  .center-item {
    align-self: center;
  }
  .flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    background: green;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
  
    justify-content: center;
    height: 100%;
    flex-wrap: wrap;
  }