title: Position by center point, rather than top-left point
body: <p>Is it possible to tell the code to position by the center point of an element, rather than by the top-left point?
  If my <strong>parent</strong> element has</p>
  
  <pre><code>width: 500px;
  </code></pre>
  
  <p>and my <strong>child</strong> element has</p>
  
  <pre><code>/*some width, for this example let's say it's 200px*/
  position: absolute;
  left: 50%;
  </code></pre>
  
  <p>one would assume that based on the <code>50%</code> positioning, the child element will be in the middle of the parent, leaving <code>150px</code> of free space on each side. However, it is not, since it is the top-left point of the child that goes to <code>50%</code> of the parent's width, therefore the whole child's width of <code>200px</code> goes to the right from there, leaving <code>250px</code> of free space on the left and only <code>50px</code> on the right.</p>
  
  <p>So, my question is, how to achieve <strong>center positioning</strong>?</p>
  
  <p>I found this solution:</p>
  
  <pre><code>position: absolute;
  width: 200px;
  left: 50%;
  margin-left: -100px;
  </code></pre>
  
  <p>but I don't like it because you need to edit it manually for each element's width - I would like something that works globally.</p>
  
  <p>(For example, when I work in Adobe After Effects, I can set a position for an object and then set specific anchor point of that object that will be put to that position. If the canvas is <code>1280px</code> wide, you position an object to <code>640px</code> and you choose the center of the object to be your anchor point, then the whole object will be centered within the <code>1280px</code> wide canvas.)</p>
  
  <p>I would imagine something like this in CSS:</p>
  
  <pre><code>position: absolute;
  left: 50%;
  horizontal-anchor: center;
  </code></pre>
  
  <p>Similarly, <code>horizontal-anchor: right</code> would position the element by its right side, so the whole content would be to the left from the point of its parent's <code>50%</code> width.</p>
  
  <p>And, the same would apply for <code>vertical-anchor</code>, you get it.</p>
  
  <p>So, is something like this possible using <strong>only CSS</strong> (no scripting)?</p>
  
  <p>Thanks!</p>