python - 没有 %(百分比)的所有分辨率的 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>

那么，知道我可以改进什么来“搞定”吗？我注意到，如果我向 max-width 添加更多内容，完整框会向左移动。也许如果我能解决这个问题，我也会解决第一个问题？

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

谢谢!

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 内更有意义。让我知道我是否接近预期结果。

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

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

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

百分比度量单位和视口(viewport)度量单位之间的最大区别在于百分比长度由包含被度量主题元素的内容决定。视口(viewport)长度由屏幕可视区域的尺寸决定。请参阅以下代码段以了解差异，以整页模式查看并调整大小以测试不同尺寸的演示。有关 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>