div to center

HTML

<html>
           <head>
             <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
            <title>Click Through a DIV to Underlying Elements</title>

                <style type="text/css">

           .sample {
                   position:absolute;
                   top:100px;
                   left:100px;
                    height:600px;
                   width:600px; 
                   border: 5px #000 solid; 
                   pointer-events:none; /* THIS IS THE TRICK YOU SEEK */
              background:blue;
                }


            </style>

      <!-- Include he following conditional to get click-throughs to work with IE -->

          <!--[if IE]>
           <style type="text/css">

                  .sample {
                            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample_600x600.png', sizingMethod='scale');
                       background:none !important;
                         }

                </style>
                  <![endif]-->

               
          </head>
          <body>
                <div>
                  <!-- Below is the "BACKGROUND DIV" -->
                  <div id="first" style="position:absolute;top:200px;left:200px;pointer-events:visible;z-index:100;width:143px;height:83px;overflow:hidden;border: 1px green dashed; background:url(7a.png);"></div>
<div id="second" style="position:absolute;top:152px; left:265px;width:143px;height:83px;overflow:hidden;border: 1px #900 dashed;pointer-events:visible; background:url(6a.png);"></div>
                    <script>
                            firstDiv = document.getElementById("first");
                            secondDiv = document.getElementById("second");
                            firstDiv.onclick = function(e){
                                console.log(e);
                                if(e.clientX > secondDiv.offsetLeft
                                   && e.clientX < secondDiv.offsetLeft +...