How to make a block in the center of the screen?

Question

How to make the main-block always in the center of the screen horizontally and vertically, even if you scaled down the window in the browser? Structure and adaptive design of code must be not edited.

Tried to do on the guide https://css-tricks.com/centering-css-complete-guide/, did not help.

.title {
  margin: 10px auto 25px;
}

.block-row {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  max-width: 700px;
}

.box {
  position: relative;
  width: 320px;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.block {
  position: relative;
  width: 300px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid red;
}

<div class="main-block">
  <h1 class="title">Title of this page</h1>
  <div class="block-row">
    <div class="box">
      <div class="block">
        some text in block
      </div>
      <div class="text-under">
        text there
      </div>
    </div>
    <div class="box">
      <div class="block">
        some text in block
      </div>
      <div class="text-under">
        text there
      </div>
    </div>
  </div>
</div>