Question

我正在尝试将我的div #center放在中心，并使其响应不同的屏幕尺寸。我没有运气这样做。这是我的HTML页面的正文。

<body>
    <h1 id="panneau">Panneau de score</h1>
    <div id="center">         
      <div class="temps" id="temps">0:00</div>
      <div class="score" id="score">0</div>
      <div class="scoreDeux" id="scoreDeux">0</div>
      <h2 id="Locaux">Locaux</h2>
      <h2 id="Visiteurs">Visiteurs</h2>
    </div>
    <center><img id="EquiLogo" src="EquinoxeLogo.png" alt="Equinoxe Logo"/></center>
  </body>

这是#center的CSS：

#center { 
  width: 1100px;
  height: 1100px;       
  margin: 0 auto;
}

这是身体的CSS：

body {   
 max-height: 300%;
 background: linear-gradient(315deg, #808080, #a6a6a6, #ff8080, #ff4d4d);
 background-size: 3000% 3000%;
 background-position: center;
 background-attachment: fixed;
}

Answer 1

我认为通过'居中'#center，你正在谈论水平居中的文本。在这种情况下，您正在寻找 text-align: center 。虽然 margin: 0 auto 确实是块级元素的正确方法，但对于文本和内联元素，您需要text-align: center。

请注意，#center有一个巨大的固定的 width 和 height {{1}这将无法响应，因为它将大于视口。您需要基于百分比的宽度，例如1100px。

如果你想进一步想要偏移你的图像（就像50%有一个很大的#center那样，你应该使用margin-top。如果你想让它粘在底部页面，您应该使用 position: fixed 或 flexbox 布局。

以下示例中都可以看到这两个：

#height

#center {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

body {
  max-height: 300%;
  background: linear-gradient(315deg, #808080, #a6a6a6, #ff8080, #ff4d4d);
  background-size: 3000% 3000%;
  background-position: center;
  background-attachment: fixed;
}

Answer 2

将width: 100%添加到您的正文标记。

Answer 3

这里的问题是你给中心元素一个固定的px宽度，并且你的身体没有声明的宽度。添加CSS旁边的

body {
  width:  100%; 
}

#center {
  max-width:  1100px; 
  width:  100%; 
  margin:  0 auto; 
  padding:  20px; 
  box-sizing:  border-box;
}

<强>解释

在这里，您将body全宽。

您的#center元素将适应屏幕大小（width: 100%;），同时按您所需的最大宽度（max-width: 1100px;）进行上限。

margin: 0 auto;属性会将#center元素水平居中，而padding: 20px;会在小于1100像素的屏幕中提供元素与屏幕边框之间的安全间距（因此，喜欢它居中）。

我会更进一步，甚至在display: flex;元素上使用#center来集中其内容，如下所示：

body {
  width:  100%; 
}

#center {
  max-width:  1100px; 
  width:  100%; 
  margin:  0 auto; 
  padding:  20px; 
  box-sizing:  border-box;
  display:  flex; 
  flex-direction:  column; 
  align-items:  center; 
  justify-content:  center; 
}

无法响应中心包含div的div

3 个答案: