<!DOCTYPE html>
<html>
  The green square below should be centered.
  <div style="width: 400px; height: 400px; position: absolute;
              perspective: 600px; left: 50%; top: 50%; background: green;">
  </div>
  <script>
    document.body.offsetWidth;
    document.querySelector("div").style.transform = "translate(-50%, -50%)";
  </script>
</html>