在浏览器中放大或缩小时，网站布局“崩溃”+其他一些基本的 CSS 问题

我对 CSS 还很陌生，我现在想做的只是为小型企业设计一个非常简单/基本的启动页面或登陆页面。

这是该网站的网址：My site

现在，如果你使用任何浏览器，比如说谷歌浏览器，然后你缩小或放大（ctrl -/+），你会注意到网站布局开始“分裂”，因为我的所有 div 都开始移动。我显然不希望这样，只是希望当人们放大或缩小时网站保持不变，就像所有好的网站一样哈哈。

我知道这一定与定位有关，但我无法想象这对我们的生活或我来说是怎样的。昨晚我花了几个小时浏览类似的问题，但我能弄清楚。

我不会发布代码，因为会占用更多空间，我假设既然我给了您 URL，您就可以从那里检索代码。

我还有一些更小的问题：

1) 如果您在 chrome 或 ie 上打开我的网站，您会注意到在页面底部的“条款和条件”之后，网站就结束了，就像它应该的那样。但是，如果您使用 Firefox，您会注意到在“条款和条件”之后，可以说背景会持续一段时间。这是为什么？我该如何解决它？

2）您会注意到，在不同的浏览器上，元素的定位略有不同。 最明显的是，如果您查看 chrome/firefox，然后查看 Internet Explorer 9，您会注意到“条款和条件”略高于 chrome 或 ff，因此稍微触及主要内容区域。有没有办法来解决这个问题？

3）什么是一种高效、有效的div居中方法？例如，我想将“注册”按钮完全居中相对于主要内容区域。我几乎只是在关注它并使用相对定位将其居中。什么是更准确的居中方法？

谢谢，如果这些问题看起来有点多余，我很抱歉。如果您需要任何澄清，我会像鹰一样监视这个问题。

Cheers

1. 当您放大或缩小时，您会因舍入和文本渲染而遇到问题。确保布局能够经受住一点拉伸而不崩溃是个好主意。

2. 相对定位受到#1 中提到的问题的影响，因此不可靠。

3. 考虑使用某些东西来删除各种浏览器将应用的属性。你可以使用reset给你一些更可行的东西或尝试正常化使它们在浏览器之间更加均匀的值。

4. 对于（水平）居中，您有一些选择：

   • 如果您有一个带有“text-align:center”的容器，它将居中所有内联块或内联的子元素。
   • 如果要将块元素居中，可以使用“margin: 0 auto”将其水平居中并删除垂直边距。
   • 如果你想让一个绝对定位的元素居中，你可以使用“left: 50%, margin-left: -(元素的宽度/2)".

除了尝试摆脱相对定位之外，我建议您不要显式设置 body 元素的高度。一般来说，您希望元素管理自己的大小，这样它们就会更加健壮。

如果您现在使用“position：relative”，因为您知道如何使用，我建议您尝试使用“float：left”（或right），或更改显示类型（display：inline-block）。这可能会帮助您朝着正确的方向开始。