没有 %（百分比）的所有分辨率的 HTML/CSS 中心

Question

我想知道，是否可以在不使用 % 的情况下使这个中心框位于页面的“最”中心？

我正在使用 VPS，并且我有一些 Python 正在运行，所以我不知道如何使用 % sizes 来使其正确。但这就是我想出多远才听说这不是以 1280x1024 为中心的：

https://s18.postimg.org/vta0qfd5l/2809583a0f43627d0fc1b428863b3faa.jpg

这是我使用的代码：

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;
}

<div>
  <table>

  </table>
</div>

那么，知道我可以改进什么来“钉它”吗？我注意到，如果我向最大宽度添加更多，完整框会向左移动。也许如果我能解决这个问题，我也会解决第一个问题？

这个问题很独特，因为我不能使用百分比来正确对齐表格，所以我只想知道这是否可能。

谢谢！

Answer 1

如果您的页面是作为 HTML 网页提供的，那么您应该能够使用 JS、HTML 和 CSS，而不会让您的后端搞砸。如果将以下样式应用于 any 元素，它将居中：

   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

还有一些错误会破坏您可能预期的其余样式：

background-height 

不存在。

min width:

应该是：

> min-width:

和

align: center;

也不存在。

在此代码段中，我更正了前面提到的错误并进行了大量重构。您有一个 div 框架表格，因此将 div 居中并确保表格保持在 div 内更有意义。让我知道我是否接近预期结果。

片段 1

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;
}

<div>
  <table>

  </table>
</div>

此解决方案应该可行，但如果您出于我无法理解的原因坚持不使用百分比，请考虑视口测量单位。

100vw = 100% of viewport width
100vh = 100% of viewport height

百分比测量单位和视口测量单位之间的最大区别在于，百分比长度由包含被测量的主题元素的任何内容决定。而视口长度取决于屏幕可视区域的尺寸。看下面的 Snippet 看看有什么区别，用整页模式查看，调整大小来测试不同维度的演示。有关vw 和vh 的更多信息，请参阅此article。

片段 2

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);
}

<p>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.</p>


<div id='A'>
  A width: 500px height: 250px
  <div id='B'>B width: 50% height: 50%</div>
  <div id='C'>C width: 50vw height: 50vh</div>
</div>

Answer 2

您可以使用 CSS 中的绝对位置和 px 中的测量值来定位它。如果您使用的是 Jquery，那么您可以使用

获取文档大小

$(document).height();
$(document).width();

或 $(窗口).height(); // 用于视口。

一些快速的 JavaScript 计算应该允许您动态地将某些东西定位在您想要的任何位置。 不要忘记绑定 .resize() 事件以适应用户调整浏览器大小。 这是一篇关于获取窗口大小等的好文章。

https://andylangton.co.uk/blog/development/get-viewportwindow-size-width-and-height-javascript

Answer 3

感谢您的帮助，但同时我与一位朋友交谈，我们提出了令人满意的解决方案，所以这是最终代码和我们所做的

1. 我把桌子从身上和其他不必要的东西拿走了（请原谅我，因为我是新手）
2. 我们使用高度和宽度而不是最大高度和宽度 - 我们必须微调高度，以便所有浏览器都能正确显示内容，我已经在手机、iPad、几台显示器上进行了测试，一切都以我的方式显示愿意。
3. IE8 除外……但老实说，没关系:)

<style>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;
}
.FormBody {
  display: inline-block;
  position: absolute;
  width: 380px;
  height: 305px;
  border: 5px ridge gold;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
  padding-left: 90px;
  padding-right: 90px;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
}
</style>

<html>
<meta charset="utf-8">

<head>
  <title>CTLServer REGISTRACIJA</title>
</head>
<script src="/md5.js" type="text/javascript"></script>
<script>
  function makeHash() {
    a = document.getElementById('serial').value;
    a = a.replace(/^\s+/, '').replace(/\s+$/, '').replace(/-/g, '').toUpperCase();
    if (!a.match(/^[A-Z0-9]{20}$/)) {
      alert('Neispravan serijski broj.');
      return false;
    }
    document.getElementById('serial').value = a;
    while (a.length < 36) {
      a += '\0';
    }
    u = document.getElementById('username').value;
    u = u.replace(/^\s+/, '').replace(/\s+$/, '');
    if (u.length < 3 || !u.match(/^[0-9a-zA-Z]+$/)) {
      alert('Zabranjeno ime za korisnika - dozvoljeno 3-36 alfa-numerička znaka (0-9 | a-z | A-Z).');
      return false;
    }
    p = document.getElementById('password').value;
    if (p.length < 3) {
      alert('Lozinka je kratka - minimum 3 alfa-numerička znaka (0-9 | a-z | A-Z)');
      return false;
    }
    document.getElementById('hash').value = hex_md5(a + u + '-' + p);
    return true;
  }
</script>
<div class="FormBody">
  <br />
  <h2><u>• CTLServer REGISTRACIJA •</h2>
  </u>
  <strong><a href="https://app.box.com/shared/static/krtchlikkjw48u21aywx">LINK za HOST</a><br /></strong>
  <br />
  <form name="registration" action="/register" method="POST">
    <input type="hidden" name="nonce" id="nonce" value="%(nonce)s" />
    <input type="hidden" name="hash" id="hash" size="32" value="" />
    <strong>Serijski Broj:</strong>
    <br />
    <input type="text" name="serial" id="serial" size="40" value="%(serial)s" onkeydown="if (event.keyCode == 13) {document.getElementById('btnGen').click(); return false;}" />
    <br />
    <br />
    <strong>Korisničko Ime:</strong>
    <br />
    <input type="text" name="user" id="username" size="40" value="%(username)s" onkeydown="if (event.keyCode == 13) {document.getElementById('btnGen').click(); return false;}" />
    <br />
  </form>
  <strong>Lozinka:</strong>
  <br />
  <input type="password" id="password" size="40" value="" onkeydown="if (event.keyCode == 13) {document.getElementById('btnGen').click(); return false;}" />
  <br />
  <p>
    <input class="button" type="button" id="btnGen" value="Registruj se" onclick="if (makeHash()) {document.forms['registration'].submit();}" />
  </p>
</div>

</html>

因此，再次感谢您的所有帮助，尤其是 @zer00ne 我肯定会简要阅读您的帖子几次，因为我认为我可以从那里理解很多内容。事实上，我想我也会尝试其他方法，以防万一我在某个时候需要它们。