JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>Header</header>
  <main>
    Main
    <div>
      <header>Header in Main</header>
      <main>
        <column>This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.</column>
        <column>This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.</column>
      </main>
    </div>
  </main>
</body>

CSS

* { box-sizing: border-box; margin: 0 }

html, main, .flex, column { height: 100%; overflow: hidden }

header, main {
  border: 1px solid #000;
  height: 20px;
}

main header, main main {
  background: rgba(0,0,0,.3)
}

main {
  height: 100%;
  overflow: hidden;
}

main main {
  max-height: 250px;
  font-size: 0;
}

main div {
  max-width: 650px;
}

column {
  display: inline-block;
  font-size: 16px;
  width: 50%;
  overflow-y: scroll;
}

header + main {
  height: calc(100vh - 1em - 4px);
  position: relative;
}
main > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  }
  
main main {
  height: calc(100vh - 32px - 8px); // по идее тут должно быть 2em вместо 32px, но раньше вы задаете этому блоку font-size: 0, поэтому em не срабатывает. Не хочу тратить время на этот костыль, попробуйте сами
}