css - 使用 css 定位内容，与页面大小无关

Question

所以我已经阅读了一些 CSS 指南并理解了大多数属性，但我仍然无法正确定位元素。

我的意思是正确的:现在我使用 margin、margin-right、margin-left、padding, (margin-left:50px), 等等...这意味着我的 div 在我查看时都定位正确在我自己的计算机上以特定的分辨率。

所以我希望这不是太笼统，但是对于每种分辨率/页面大小，我如何以一种方式将内容放置在页面中的相同相对位置，无论谁和什么人查看它(我想如果 99% 的情况都一样，那也是一个好的开始)。

更具体一点:我可以使用哪些属性以我描述的方式定位元素？

这是我的一个位置不佳的小元素的链接(在我的屏幕上一切都很好，但在其他人的屏幕上却不是那么好: http://kash.hostzi.com/utopia/minesweeper.html

例如，查看 #gameTable 的 css - 我想将其居中并以一种可怕的方式实现。

Answer 1

在您的链接示例中，您似乎希望游戏板居中。如果它是一个 block 级元素，例如 div 或 table，并且你想将它居中，你可以在元素本身上使用它:

margin-left: auto;
margin-right: auto;

如果它是一个内联元素，并且你想将它居中，你可以在parent 元素上使用它:

text-align: center;

如果您不想将其居中，而只是想让位置比例随屏幕尺寸 变化，请执行以下操作:

margin-left: 10%;
margin-right: 10%;

如果您希望位置随字体大小 缩放，请执行以下操作:

margin-left: 10ex;
margin-right: 10ex;