Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)

Question

I\'m trying to center two divs with dynamic heights inside a dynamic wrapper... I\'ve been playing with all sorts of tricks to try and get this working cross-browser to no a

Answer 1

Why don't use flex?

.wrapper {
  height: 200px;
  position: relative;
}

.green {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}