title: How to center the webpage which used by iframe
body: <p>I have a simple strange question about iframe, but I'll be happy if I can find a solution from you :)</p>
  
  <p>I have an iframe which view some content like picture 1</p>
  
  <p>What I want is to see iframe like (picture 2) when I open containing webpage, I want to view the content from the center of horizontal.</p>
  
  <p><img src="https://i.stack.imgur.com/Q85Sh.jpg" alt="pic 1">
  <img src="https://i.stack.imgur.com/cb89L.jpg" alt="pic 2"></p>
  
  <p>Thank you</p>
  
  <hr>
  
  <p>My source code</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;body&gt;
  &lt;div style="width: 1680px; background: #ccc;"&gt;
      &lt;div style="float: left; width: 740px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;
          &lt;span&gt;A1&lt;/span&gt;
      &lt;/div&gt;
      &lt;div style="float: left; width: 740px; height: 60px;"&gt;&lt;/div&gt;
      &lt;br clear="All" /&gt;
      &lt;div style="float: left; width: 320px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;
          &lt;span&gt;A2&lt;/span&gt;
      &lt;/div&gt;
      &lt;div style="float: left; width: 640px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;
          &lt;span&gt;A3&lt;/span&gt;
      &lt;/div&gt;
      &lt;div style="float: left; width: 320px; height: 60px;"&gt;&lt;/div&gt;
      &lt;br clear="All" /&gt;
      &lt;div style="float: left; width: 110px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;
          &lt;span&gt;A4&lt;/span&gt;
      &lt;/div&gt;
      &lt;div style="float: left; width: 220px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;&lt;/div&gt;
  &lt;div style="float: left; width: 220px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;
          &lt;span&gt;A5&lt;/span&gt;
      &lt;/div&gt;
      &lt;div style="float: left; width: 220px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;&lt;/div&gt;
      &lt;div style="float: left; width: 110px; height: 60px;"&gt;&lt;/div&gt;
      &lt;br clear="All" /&gt;
      &lt;div style="float: left; width: 5px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;&lt;/div&gt;
      &lt;div style="float: left; width: 10px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;&lt;/div&gt;
      &lt;div style="float: left; width: 10px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;&lt;/div&gt;
      &lt;div style="float: left; width: 10px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;&lt;/div&gt;
      &lt;div style="float: left; width: 10px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;&lt;/div&gt;
      &lt;div style="float: left; width: 10px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;&lt;/div&gt;
      &lt;div style="float: left; width: 10px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;&lt;/div&gt;
      &lt;div style="float: left; width: 10px; height: 60px;"&gt;&lt;/div&gt;
      &lt;div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"&gt;&lt;/div&gt;
      &lt;div style="float: left; width: 5px; height: 60px;"&gt;&lt;/div&gt;
      &lt;br clear="All" /&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This the code of the mother of iframe</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /&gt;
  &lt;link href="//melchoyce.github.io/dashicons/css/dashicons.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;div style="float: right; width: 180px; background: #E5E5E5;"&gt;
      &lt;ul id="side-menu"&gt;
          &lt;li&gt;&lt;a href="index.php?mode=index"&gt;&lt;div class="dashicons dashicons-admin-home"&gt;&lt;/div&gt; home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="index.php?mode=personal_info"&gt;&lt;div class="dashicons dashicons-id-alt"&gt;&lt;/div&gt; info&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="index.php?mode=view_network"&gt;&lt;div class="dashicons dashicons-networking"&gt;&lt;/div&gt;newtork&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="logout.php"&gt;&lt;div class="dashicons dashicons-migrate"&gt;&lt;/div&gt; logout &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
          &lt;div style="float: right; margin: 8px;"&gt;
              &lt;script type="text/javascript"&gt;
                  $(window).load(function () {
                      var ifr = $("#ifr"),
                          ifr_doc = ifr.contents(),
                          ifr_doc_w, ifr_w;
  
                      ifr_w = ifr.width();
                      ifr_doc_w = ifr_doc.width();
  
                      ifr_doc.scrollLeft(
                          (ifr_doc_w - ifr_w) / 2
                      );
                  });
          &lt;/script&gt;
          &lt;iframe id="ifr" src="network.php" style="width: 1000px; height: 600px; border: 1px solid #e5e5e5;"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;br clear="all" /&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  &lt;script src="https://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>