Vertically and horizontally centralize HTML table

Tech Talk : HTML – How to center a table of the screenThe HTML code below highlights how to center a table vertically and horizontally on a webpage.

Click here to test the HTML code below.

<html>
  <head>
    <style type="text/css">
      .box { width:300px;
             height:300px;
             background-color:#d9d9d9;
             position:fixed;
             margin-left:-220px; /* half of width */
             margin-top:-150px;  /* half of height */
             top:50%;
             left:50%;
      }
    </style>
    <title>Xybernetics Products Table</title>
  </head>
  <body>
    <table class="box">
      <tbody>
        <tr>
          <th>Device</th>
          <th>IP Address</th>
          <th>Specifications</th>
        </tr>
        <tr>
          <td>XynetSCADA uCFlowCal</td>
          <td>192.168.2.188</td>
          <td>http://www.xybernetics.com/solutions-uCFlowCal.html</td>
        </tr>
        <tr>
          <td>uCMobile HMI</td>
          <td>192.168.2.221</td>
          <td>http://www.xybernetics.com/solutions-uCMobileHMI.html</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

 

n1849778
About the
I am a software developer in Calgary, Alberta, Canada with passion in getting my fingers in any new technology. I started software development when I was 10 years old and have never looked back. Now with well over 35 years of software development, I wanted to share some of these key knowledge with the people of the world in the wide web.