Question

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

我正在使用VPS并且我在那里有一些Python，所以我不知道如何使用％size来实现它。但这是我走了多远才发现这不是以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，而不会让您的后端弄乱它。如果您将以下样式应用于任何元素，则它将居中：

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

还有一些错误，这些错误与您可能预期的剩余样式相差甚远：

background-height

不存在。

min width:

应该是：

> min-width:

和

align: center;

也不存在。

在这个片段中，我纠正了前面提到的错误，并重构了大量的错误。你有一个div框架表，所以更有意义的是居中div并确保表保持在div内。如果我接近预期的结果，请告诉我。

SNIPPET 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

百分比度量单位和视口度量单位之间的巨大差异是百分比长度由包含被测量主题元素的任何内容确定。视口长度由屏幕可视区域的尺寸决定。请参阅以下代码段以查看差异，在完整页面模式下查看它并调整大小以测试不同维度的演示。有关vw和vh的更多信息，请参阅此article。

SNIPPET 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

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

我从身体和其他非必要物品上取下了桌子（原谅我，因为我是新手）
我们使用高度和宽度代替最大高度和宽度 - 我们必须微调高度，以便所有浏览器都可以正确显示内容，我已经在手机，iPad，几台显示器上测试了这一点，所有内容都以某种方式显示我想。
除了IE8 ......但老实说，它并不重要：）

＆＃13;

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

＆＃13;

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

＆＃13;

再一次，感谢你的帮助，尤其是@ zer00ne，我肯定会简单地阅读你的帖子几次，因为我认为有很多我可以从那里理解。事实上，我认为我也会尝试其他方法，只是为了让它在某些时候我需要它们。

所有分辨率的HTML / CSS中心，不含％（百分比）

3 个答案:

SNIPPET 1

SNIPPET 2