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

【问题标题】：Positioning stuff with css, independent of the page size使用 css 定位内容，与页面大小无关
【发布时间】：2013-06-01 00:52:54
【问题描述】：

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

我的意思是正确的：现在我使用margin、margin-right、margin-left、padding、(margin-left:50px) 等的特定值来定位东西......这意味着我的divs 在我自己的电脑上以特定分辨率查看时，所有位置都正确。

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

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

这是我的一个定位不佳的小项目的链接（在我的屏幕上一切都很好，但在其他方面则不然： http://kash.hostzi.com/utopia/minesweeper.html

以 #gameTable 的 css 为例 - 我想以一种可怕的方式将其置于中心位置。

【问题讨论】：

【解决方案1】：

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

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

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

text-align: center;

如果您不尝试将其居中，而只是想让位置缩放与 屏幕尺寸，请执行以下操作：

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

如果您想用 字体大小 缩放位置，请执行以下操作：

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

【讨论】：

【解决方案2】：

您可以开始使用百分比。喜欢：

margin-left: 20%;
margin-right: 20%;

它会根据窗口（它所在的元素）的大小进行边距。

【讨论】：