title: How to set page content to center of the browser?
body: <p>I need is to show the content of a web page in the center of the browser, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the center of the browser.
  Thanks in advance</p>
  
  <p>My Html and css code is below</p>
  
  <p>HTML code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link type="text/css" rel="stylesheet" href="basic1.css"/&gt;
      &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="menu"&gt;
          &lt;a href = "#"&gt;&lt;img class="imgc" src="img.png" alt="icon"/&gt;&lt;/a&gt;
          &lt;a href = "#"&gt;&lt;img class="imgd" src="do.png" alt="do"/&gt;&lt;/a&gt;
      &lt;/div&gt;
          &lt;div id="smenu"&gt;&lt;/div&gt;
      &lt;div id="mainbox"&gt;
          &lt;div class="ibox"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="menutext"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;???????&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;?????&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;?????&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="py"&gt;
          &lt;pre class="p"&gt;??&lt;span style="color:black;font-size:25px"&gt;??????&lt;/span&gt;&lt;/pre&gt;
          &lt;pre class="s"&gt;?? ???? ??? ??? &lt;span style="color:#980000;
          letter-spacing :+1mm"&gt;&lt;b&gt;:3&lt;/b&gt;&lt;/span&gt;&lt;/pre&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#menu img.imgc {
  position:absolute;
  right:77%;
  top:10px;
  margin:0px auto;
  }
  #menu img.imgd {
  position:absolute;
  left:75%;
  top:10px;
  margin:0px auto;
  }
  #menu {
  position:absolute;
  left:0%;
  top:0%;
  right:0%;
  right:0%;
  width:100%;
  height:125px;
  border-bottom:1px solid #C8C8C8;
  margin:0px auto;
  background-color:#E8E8E8; 
  }
  #mainbox div.ibox{
  position:absolute;
  left:31%;
  top:20px;
  border-left:3px solid gray;
  height:105px; 
  margin:0px auto;
  }
  #menutext ul{
  position:absolute;
  right:72%;
  top:15px;
  list-style: none;
  line-height:30px;
  margin:0px auto;
  }
  #menutext a{
  font-size:12px;
  font-variant:small-caps;
  font-family:Lucida,Helvetica,sans-serif;
  font-weight:500; 
  color:black;
  text-decoration: none;
  text-align: left;
  }
  #py pre.p{
  position:absolute;
  top:15px;
  left:33%;
  font-family:Tahoma, Geneva, sans-serif;
  letter-spacing : +2mm;
  font-size:50px;  
  color:#009933;
  text-decoration: none;
  text-align: center;
  margin:0px auto;
  }
  #py pre.s{
  position:absolute;
  top:67px;
  left:33%;
  font-family:Tahoma, Geneva, sans-serif;
  letter-spacing : +3mm;
  font-size:12px;  
  color:gray;
  text-decoration: none;
  text-align: center;
  margin:0px auto;
  }
  </code></pre>