为什么此代码（具有显示弹性）、对齐内容中心和对齐项目中心时未将元素水平和垂直对齐到中心？

Why is this code, with display flex, justify-content center and align-item center not aligning the elements to the center horizontally and vertically?

提问人：JonP. 提问时间：8/22/2023 最后编辑：Md. Rakibul IslamJonP. 更新时间：8/23/2023 访问量：43

问：

我正在学习 JS，我所做的任务之一 - 是编写简单的 JS、HTML 和面向 CSS 的代码，只是为了帮助我学习 JS 并能够创建某些 JS Web 元素和项目，以便当我觉得我很好地掌握了 JS 时，我可以将它们应用于将来的大型项目。

无论如何，我正在使用：

display: flex;
align-items: center;
/* AND */
justify-content: center;

到我的CSS文件中的“正文”。这难道不应该使元素自动显示在中心、垂直和水平上吗？我没有任何其他CSS规则会弄乱它。反正我不这么认为。

但是，如果我检查元素并转到代码的最顶端 - HTML 代码，即：

然后（在 Inspect Element 中）将以下内容添加到 element.style

以及将其添加到我在 CSS 文件中声明的 body 标签中。<html lang="en">height: 100%;
height: 100%;

噗，它有效。它将元素垂直居中到页面的中心。它已经水平居中。只是在我添加该代码之前不要垂直。但我认为我不应该在那么

我在这里做错了什么？我正在使用 VSCode，然后预览带有 LifeServer 扩展名的 HTML 文件。我正在学习 Flexbox - 因为我最近才开始认真对待编码，希望最终找到一份工作（在线上学后）。<html lang="en"> element.style

这是我的代码，对不起，这篇文章很长。只是难以置信的困惑。

body {
  background-color: #dbdbdb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrows {
  height: 70px;
}


/* .left-arrow {
  display: flex;
  align-items: center;
  justify-content: center; */
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.top {
  display: flex;
  align-items: center;
  gap: 50px;
}

<div class="container">
  <div class="top">
    <img src="images/left-arrow.svg" class="arrows arrow-left" alt="Left Arrow">
    <div class="frame">
      <div class="slider"></div>
    </div>
    <img src="images/right-arrow.svg" class="arrows arrow-right" alt="Right Arrow">
  </div>
  <div class="bottom"></div>
</div>

<script src="slider.js"></script>

slider.js 文件中没有代码。我还没有走到那一步。

我尝试将多个CSS类的高度从100%和100vh更改为100vh。老实说，我不确定发生了什么，我已经摆脱了一些 HTML 元素以及一些 CSS 元素。

HTML CSS FlexBox 居中

3赞 Emiel Zuurbier 8/22/2023

但我认为我不应该增加 100% 的高度，但你做到了。默认情况下，大多数元素没有设置属性，并且会根据其内容增长。如果希望在不考虑内容大小的情况下进行对齐，则必须显式设置高度。height

0赞 Md. Rakibul Islam 8/22/2023

为什么您认为不应该指定 100% 高度？即使你认为它不是垂直居中，实际上它在可用高度内垂直居中。但是，如果您认为它引入了视口中心，则必须指定视口高度。它无法读懂你的心思。

答：

1赞 Mehrshad Cheshm Khavari 8/23/2023 #1

哦。。。每次我想在身体中居中某些东西时，我都会遇到问题......

问题是您的身体不会自动设置为视口高度的 100%，如果您的内容没有填充该高度，则需要在身体上手动设置，如下所示：height

body {
   height: 100vh;
}

“vh”是大小的单位，表示“视口高度”。当我们将身体的高度设置为 100vh 时，这基本上意味着身体的高度应该是视口的 100%，有趣的是，如果您只是简单地将身体的高度设置为 100%，它是行不通的！这可能有点令人困惑，但我现在会解释它。执行此操作时：

body {
   height: 100%;
}

这基本上意味着正文的高度应该是 PARENT ELEMENT（即 html 标签）的 100%，但重要的是要注意，如果您不为 html 标签设置高度，则高度将由子元素自动设置。

我希望我的解释足够好，以便您可以解决您的问题，如果您仍然有任何问题，请告诉我

0赞 NVRM 8/23/2023

真的可能就是这样，是的。

0赞 JonP. 8/23/2023

非常感谢你！我确实找到了答案 - 但发现我不得不 100% 调整主体高度和容器高度很奇怪。因为我正在观看的教程根本没有显示他这样做。

0赞 Mehrshad Cheshm Khavari 8/23/2023

@JonP - 我很高兴它解决了你的问题

上一个：在每行 CSS 中居中屏幕特定列

下一个：我怎样才能使这个 div 居中而不使文本居中？我希望它左对齐

为什么此代码（具有显示弹性）、对齐内容中心和对齐项目中心时未将元素水平和垂直对齐到中心？

Why is this code, with display flex, justify-content center and align-item center not aligning the elements to the center horizontally and vertically?

评论

评论