JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c">
<div class="main">

<div class="parent">
    <h2>
    Hello world this is cooll to be a cool man
    </h2><h1>
    Hi Bob that's me Carla and my friends
    </h1>
    <div class="child">I have a 500px border-bottom, but I also have a -500px margin-bottom.</div>  
</div>
</div>
</div>

CSS

.c {
  width: 100%;
  height: 800px;
  overlow: hidden;
  background: #c1c1c1;
}
.main {
  background: #000;
  display: block;
  width: 100%;
  height: 100%;
}
.parent {
    background: yellow;
    height: 500px;
    width:100%;
    display:block;
    overflow: hidden;
    transform: translateY(-50%);
    top: 50%;
    position: relative;
}
.child {
   
    height: 100px;
    background: lightblue;  
    margin: -150px auto 0px;
      text-align: center;
  vertical-align: center;
  padding: 200px 0px
}
h2 {
  background: red;
  display:block;
  width:100%;
  font-size: 40px;
  line-height: 40px;
  margin: 40px auto;
  text-align: center;
  vertical-align: center;
}
h1 {
  background: #ccc;
  display:block;
  width:100%
  font-size: 60px;
  line-height: 60px;
  margin: 40px auto;
  text-align: center;
}