html - 当我没有指定固定宽度时，div 如何居中？

Question

当设计是流动的(没有固定宽度)时，wrapper div using margin:0 auto; 如何居中？

#wrapper {
  max-width: 1000px;
  min-width: 767px;
  margin: 0 auto;
}

Answer 1

max-width:1000px; 的意思是:制作一个最大宽度为1000px 的容器。如果页面较大(因为用户使用更宽的窗口)，它将用空白填充另一部分。

min-width:767px 将设置最小值。因此，如果用户的窗口小于 1000px，则容器不适合。因此它会自动将其大小减小到最小值(在本例中)767px。如果用户的窗口仍然较小，则会出现滚动条。容器将设置为 767px。

如果用户加载的页面介于 max-width 和 min-width 之间，那么它将采用可用的最大宽度。有关此主题的更多信息，请参阅下面的“更准确地说是每个案例的示例”部分。

当你在 #wrapper 上使用 margin:0 auto; 时。 #wrapper 将居中，底部顶部没有边距。因此，与默认设置的右侧空白不同，现在空白将在容器的左侧和右侧共享。

我做了一个宽度比下面示例中的问题更小的示例，以表明它会居中。这完全是因为以下因素的结合:max-width 小于用户的窗口大小(下面的框)和 margin: 0 auto; 这将尽可能使 div 居中。

#wrapper {
  max-width: 200px;
  min-width: 100px;
  margin: 0 auto;
  height:50px; /* added this as example */
  background:red; /* add this as example */
}

<div id="wrapper"></div>

更准确地说，每个案例的例子:注意(前置条件):以下情况是div作为页面中的主要元素。所以没有其他元素对 #wrapper 元素有影响。就像本文中的代码示例一样。

• 用户的浏览器大小为 1100px 宽度:#wrapper 的宽度为 1000px 并且会有 50px 左边的空白和 50px 右边的空白。 (参见上面的代码示例)。
• 用户使用的浏览器大小为:920px 宽度:#wrapper 的宽度为 920px; 并且会有左右两边没有空格。
• 用户使用的浏览器大小为:600px 宽度:#wrapper 的宽度为 767px; 并且会有左侧和右侧没有空格。除此之外，用户将在其页面底部有一个滚动条，以便能够看到完整的 #wrapper。请参阅下面的滚动条代码示例:

#wrapper {
  max-width: 5000px;
  min-width: 1000px;
  margin: 0 auto;
  height:50px; /* added this as example */
  background:red; /* add this as example */
}

<div id="wrapper"></div>