title: How to center a relative div?
body: <p>I have been trying to get the following code working for hours, without success... Could you please help me to get the projects div centered (even when the page is zoomed in and out)?</p>
  
  <p>Here is my HTML &amp; CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#bottom {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background-color: #FFF;}
   
  #secondsection {
   background-size: 100% auto;
   background-size: cover;
   color: #eaeaf0;
   margin-left: 7%;
   margin-right: 7%;
   padding-top: 35px;
   padding-bottom: 35px;
   position: relative;}
  
  #ss_top {
   width: 100%;
   height: 100%;}
  
  .ss_title {
   display: inline;
   float:left;
   color: #000000;
   font-family: 'Eurostile';
   font-size: 35px;
   text-transform: uppercase;}
  
  .ss_title2 {
   color: #a5a5a5;}
  
  #gallerybutton {
   position: relative;
   display: inline;
   float: right;
   margin-right: 0%;
      margin-top: 50px;
      padding: 20px;
      background-color: #000;
      text-decoration: none;
      border: none;
      color: #FFF;
      text-transform: uppercase;}
  
  #projects {
   position: relative;
   margin-left: auto;
   margin-right: auto;
   max-width: 2000px;
   padding: 175px 0px 0px 0px;}
  
  #pr_one, #pr_two {
   display: block;}
  
  .pr_img {
   float: left;
   display: inline;
   margin-right: 1%;
   margin-bottom: 1%;}
  
  #viewprofilebutton {
   position: relative;
      left: -75px;
      margin-left: 50%;
      margin-top: 3.5%;
      margin-bottom: 2.5%;
      padding: 20px;
      background-color: #000;
      text-decoration: none;
      border: none;
      color: #FFF;
      text-transform: uppercase;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="secondsection"&gt;
       
   &lt;div id="ss_top"&gt;
    &lt;p class="ss_title"&gt;A selection of projects&lt;br /&gt;&lt;span class="ss_title2"&gt;I've worked on lately&lt;/span&gt;&lt;/p&gt;
     &lt;button type="button" id="gallerybutton"&gt;See everything&lt;/button&gt;
   &lt;/div&gt;
  
   &lt;div id="projects"&gt;
   &lt;div id="pr_one"&gt;
    &lt;div class="pr_img"&gt;&lt;a target="_blank" href=""&gt;&lt;img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"&gt;&lt;/a&gt;&lt;/div&gt;
       &lt;div class="pr_img"&gt;&lt;a target="_blank" href=""&gt;&lt;img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class="pr_img"&gt;&lt;a target="_blank" href=""&gt;&lt;img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"&gt;&lt;/a&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;div id="pr_two"&gt;
    &lt;div class="pr_img"&gt;&lt;a target="_blank" href=""&gt;&lt;img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="pr_img"&gt;&lt;a target="_blank" href=""&gt;&lt;img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="pr_img"&gt;&lt;a target="_blank" href=""&gt;&lt;img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"&gt;&lt;/a&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;a href="#thirdsection"&gt;&lt;button type="button" id="viewprofilebutton"&gt;See my work&lt;/button&gt;&lt;/a&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>