HTML/CSS center for all resolutions without % (percentage)
<p>I was wondering, is it possible to make this central box be "in the very" center of the page without using %?</p>

<p>I'm using VPS and I have some Python going on there, so I don't know how to use % sizes in order to get it right. But this is how far I came up only to hear that this isn't centered on 1280x1024:</p>

<p><a href="https://s18.postimg.org/vta0qfd5l/2809583a0f43627d0fc1b428863b3faa.jpg" rel="nofollow">https://s18.postimg.org/vta0qfd5l/2809583a0f43627d0fc1b428863b3faa.jpg</a></p>

<p>This is the code I have used:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>h2 {
  margin: 0;
}
body {
  background-color: #121212;
  background-image: url("https://app.box.com/shared/static/vgfs65li424fk8h4n5e23pm7070yrewq.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-height: auto;
  max width: 1200px;
}
table {
  display: inline-block;
  position: absolute;
  max-width: 350px;
  max-height: 265px;
  border: 5px ridge yellow;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
  padding-left: 90px;
  padding-right: 90px;
  background: rgba(255, 255, 255, 0.8);
}
div {
  text-align: center;
  align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;table&gt;

  &lt;/table&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>So, any idea what I can improve to "nail it"? I've noticed that if I add more to max-width complete box moves to the left. Maybe if I can solve this, I would solve the first problem as well?</p>

<p>This question is unique because I can't use percentage in order to align table properly, so I just want to know if this is possible at all.</p>

<p>Thanks!</p>

<p>If your page is served as a HTML webpage, you <em>should</em> be able to use JS, HTML, and CSS without your backend mucking it up. If you apply the following styles to <strong>any</strong> element, it will be centered:</p>

<pre><code>   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
</code></pre>

<p>There were some errors as well which would pretty much frag the remaining styles you might've expected:</p>

<pre><code>background-height 
</code></pre>

<p>Does not exist.</p>

<pre><code>min width:
</code></pre>

<p>should be:</p>

<pre><code>&gt; min-width:
</code></pre>

<p>and</p>

<pre><code>align: center;
</code></pre>

<p>doesn't exist either.</p>

<p>In this Snippet I corrected the previously mentioned errors and refactored a substantial amount. You have a div framing the table, so it made more sense to center the div and make sure that the table stays within the div. Let me know if I'm close to expected results or not.</p>

<h3>SNIPPET 1</h3>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>h2 {
  margin: 0;
}
body {
  background-color: #121212;
  background-image: url("https://app.box.com/shared/static/vgfs65li424fk8h4n5e23pm7070yrewq.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  height: auto;
  max-width: 1200px;
}
table {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
}
div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 350px;
  max-height: 265px;
  border: 5px ridge yellow;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;table&gt;

  &lt;/table&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>This solution should work, but if you insist on not using percentages for reasons beyond my comprehension, then consider the viewport measurement unit.</p>

<pre><code>100vw = 100% of viewport width
100vh = 100% of viewport height
</code></pre>

<p>The big difference between percentage unit of measure and viewport unit of measure is that percentage lengths are determined by whatever contains the subject element being measured. While a viewport length is determined by the dimensions of your viewable area of the screen. See the following Snippet to see the difference, view it in full page mode and resize to test the demonstration at different dimensions. For more on <code>vw</code> and <code>vh</code> refer to this <a href="http://thenewcode.com/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design" rel="nofollow">article</a>.</p>

<h3>SNIPPET 2</h3>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background: black;
  color: white;
}
#A {
  border: 3px dotted red;
  width: 500px;
  height: 250px;
  background: rgba(255, 0, 0, .4);
}
#B {
  border: 2px dashed blue;
  width: 50%;
  height: 50%;
  background: rgba(0, 0, 255, .4);
}
#C {
  border: 2px dashed yellow;
  width: 50vw;
  height: 50vh;
  background: rgba(0, 255, 255, .4);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Viewable area of browser is viewport. View this in Full page mode and resize the browser at various sizes. Div B (blue) doesn't change. Div C (yellow) does.&lt;/p&gt;


&lt;div id='A'&gt;
  A width: 500px height: 250px
  &lt;div id='B'&gt;B width: 50% height: 50%&lt;/div&gt;
  &lt;div id='C'&gt;C width: 50vw height: 50vh&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

python html css center