title: How to move div container in the center of the screen, with children divs centralized inside of it
body: <p>I have the following HTML/CSS code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;.dummy {
    color: greenyellow;
  }
  
  .middle-container {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  
  .middle-container-box {
    width: 50px;
    height: 50px;
    background-color: red;
  }
  
  .middle-container-text {
    color: red;
    font-weight: bold;
    font-size: 15px;
  }
  
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
    &lt;div class="dummy"&gt;
      Lorem Ipsum is simply dummy text...
    &lt;/div&gt;
    &lt;div class="middle-container"&gt;
      &lt;div class="middle-container-box"&gt;&lt;/div&gt;
      &lt;div class="middle-container-text"&gt;
        this text needs to be in the center
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this sandbox: <a href="https://codesandbox.io/s/2py075pqnr" rel="nofollow noreferrer">https://codesandbox.io/s/2py075pqnr</a>
  I need to have <code>middle-container</code> at the center of the screen and the div and the text elements (which are inside of this container) to be centralized inside of the container.</p>
  
  <p>So it should be moved to the left, something as: <a href="https://prnt.sc/n349h1" rel="nofollow noreferrer">https://prnt.sc/n349h1</a> (we need to move it only to the left). But moving it with fixes values (in pixels) is not an option, since I need this working on all screens resolutions.</p>