JSFiddle - React, Tailwind, and code Playground

vertical-align middle

by Timoleon Pagounas

HTML

<div class="wrapper">
  <div class="container">
    <div class="top-div">
      topd div
    </div>
    <div class="bottom-div">
      bottom div
    </div>
    <div class="bottom-div">
      bottom div 2
    </div>
  </div>
</div>

CSS

.wrapper {
  float: left;
  height: 100vh;
}

.container {
  position: absolute;
  display: block;
  float: left;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color:yellow;
}

.top-div {
  margin: 5px auto;
  
  position: relative;
  width: 80%;
  height: 30%;
  background-color: red;
}

.bottom-div {
  margin: 5px auto;
  position: relative;
  
  width: 80%;
  background-color: green;
}

JavaScript

$(function() {
  var containerH = $(".container").height();
  var topdivH = $(".top-div").height();
  $(".top-div").css('margin-top', containerH*.5 - topdivH*0.5);
});