title: Why positioning absolute element in the center of it's parent relative element while setting top and left to 50% does not work?
body: <p>I have learned that the <strong>"absolute"</strong> position will position the Html element relative to the parent element that should have other position then static. </p>
  
  <p>I wonder why while setting the <strong>top</strong> and <strong>left</strong> property of the child element to <strong>50%</strong> while it's position is absolute and the one of its parent is relative does not work? Logically it should work. I really wonder why?
  Once I add this property :  <code>translate(-50%, -50%)</code> to the childe it centered.</p>
  
  <p>I wonder why what I did that seems very logical does not work?!!!! </p>
  
  <p>Any explanation, please? </p>
  
  <p>Here is my 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>article{
      width: 500px;
      height:500px;
      background-color: bisque;
       position: relative;
  }
  article div{
      width:55%;
      height:110px;
      position: absolute;    
      top:50%;
      left:50%; 
      background-color: blue;
      /* transform: translate(-50%, -50%); */
  }
  article p {
      font-size: 50px; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;article&gt;
          &lt;div&gt;
              &lt;p&gt;
                  Hello Word !
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/article&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>