title: Center an element (Absolute) on the click
body: <p>So, when I click on my screen, i want display a circle (centered verticaly and  horizontaly) where I click.</p>
  
  <p>My poblem is that I get all the time the corner top left of my element.</p>
  
  <p>Here is a Plunker: <a href="https://plnkr.co/edit/DLeQuK0IKxHwUM1sWk0T" rel="nofollow noreferrer">https://plnkr.co/edit/DLeQuK0IKxHwUM1sWk0T</a></p>
  
  <p>I have tried with</p>
  
  <pre><code>margin-left:-50%
  </code></pre>
  
  <p>but without success.</p>
  
  <p><strong>Edit: I got answers very quickly, thanks!</strong></p>
  
  <p>The Answer is to add to my class:</p>
  
  <pre><code>transform:translate(-50%, -50%);
  display: block;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Code goes here
  
  function printMousePos(event) {
    var element = document.getElementById("body");
    var para = document.createElement("div");
    para.className = "circle";
    para.setAttribute("style", "position : absolute;left:" + event.clientX + "px;top:" + event.clientY + "px");
  
    element.appendChild(para);
    console.log(event.clientX, event.clientY);
  }
  
  document.addEventListener("click", printMousePos);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Styles go here */
  
  body {
    position: relative;
    height: 1000px;
  }
  
  .circle {
    color: blue;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border-style: solid;
    border-width: 20px;
    border-color: blue;
    border-radius: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body id="body"&gt;
    Click Everywhere
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>