title: What does "top: 0; left: 0; bottom: 0; right: 0;" mean?
body: <p>I am reading a guide from this <a href="http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/" rel="noreferrer">site</a> about a technique on centering elements.</p>
  
  <p>I read the CSS code, </p>
  
  <pre><code>.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
  }
  </code></pre>
  
  <p>And I read the explanation too.</p>
  
  <p>But what I don't understand is the part that explains "top: 0; left: 0; bottom: 0; right: 0;". </p>
  
  <p>It says, </p>
  
  <blockquote>
    <p>Setting top: 0; left: 0; bottom: 0; right: 0; gives the browser a new bounding box for the block. At this point the block will fill all available space in its offset parent, which is the body or position: relative; container. Developer.mozilla.org: For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).</p>
  </blockquote>
  
  <p>What does this mean? Bounding box? Fill all the available space? </p>
  
  <p>How does "top: 0; left: 0; bottom: 0; right: 0;" work? does it take the 4 sides of a box and stretch them to fill the container? Is that how the values work? </p>
  
  <p>What actually happens when I set "top: 0; left: 0; bottom: 0; right: 0;"?</p>
  
  <p>I'm completely lost at this explanation and I would like somebody to rephrase, restate and explain it to me in a more simple and understandable fashion. </p>
  
  <p>Thank you.</p>