Question

当设计流畅（没有固定宽度）时，如何使用wrapper将margin:0 auto; div居中？

#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之间的页面，则它将采用可用的最大宽度。有关该主题的更多信息，请参见下面的“为每个案例提供更精确的示例”部分。

在此margin:0 auto;上使用#wrapper时。 #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的空白和{{ 1}}的空白。（请参见上面的代码示例）。
用户使用的浏览器的大小为：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 */
}

Answer 2

您可以尝试以下操作：-

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

Answer 3

您可以使用Flexbox。

在要居中的元素的父元素上设置以下属性

display: flex;
justify-content: center;   // for horizontally center 
align-items: center;       // for vertically center

当我未指定固定宽度时，div如何居中？

3 个答案: