Flexbox 不会垂直对齐内容

Question

到目前为止我看到的所有 flexbox 教程都说垂直对齐是通过使用 align-items 和 justify-content 并将两者设置为居中来完成的；然而，这似乎不起作用，如下所示（我正在尝试对齐 lorem ipsum 文本）。如果重要的话，我使用的浏览器是 Chrome。

这是一个代码笔：http://codepen.io/anon/pen/QjBrEm

我已经在 Stack Overflow 上尝试了很多建议，例如：

body, html:
    height: 100%

这些好像都不行。

Answer 1

您已经使用 flexbox 布置了容器内部的部分，如 Codepen 所示，这给出了所有三个部分显示在彼此下方的结果。

第一部分中的文本在 section.initial 内，未使用 flexbox 布局，因为它仅在父级上指定。因此，文本只是根据默认填充和您输入的text-align放置。

要使文本在该部分居中，也请在该部分开始使用 flexbox 布局。

Answer 2

当您创建弹性容器时，只有 child 元素成为弹性项目。 children 之后的后代不会成为弹性项目，弹性属性不适用于它们。

因此，如果您尝试将 <p> 文本居中，您会注意到 <p> 是 <section> 的 child，这是一个弹性项目但不是弹性容器。

您需要制作 <section> 一个（嵌套的）弹性容器，以便弹性属性应用于 <p>。

试试这个：

#mainpage-container section {
   width: 100%;
   height: 100vh;
   text-align: center;

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

演示：http://codepen.io/anon/pen/xwJjvO

Answer 3

由于您是在 section 元素内对齐段落，因此需要在 section(parent) 上使用 flexbox 属性。 #mainpage-container 上的 Flexbox 属性不会对孙子 p 产生影响，因为它不会被父元素继承，即 section 元素。

#mainpage-container section.initial {
   display: flex;
   justify-content: center;
   align-items: center;
}

#mainpage-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#mainpage-container section {
  width: 100%;
  height: 100vh;
  text-align: center;
}
#mainpage-container .initial {
  background-color: #212121;
  color: #ffffff;
  font-size: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#mainpage-container .initial #logo {
  height: 15rem;
  width: auto;
}

<div id="mainpage-container">
  <section class="initial">
    <!--<img src="/assets/k.png" id="logo">-->
    <p>Lorem ipsum.</p>
  </section>

  <section>
  </section>

  <section>
  </section>
</div>

Answer 4

您的 SASS 应该是：

  .initial
    background-color: #212121
    color: #ffffff
    display: flex
    align-items: center
    justify-content: center

对齐元素的内容，因为 flexbox 布局不会被子元素继承。

Codepen Demo

Flexbox 不会垂直对齐内容

Flexbox won't vertically align content

html

sass

vertical-alignment

flexbox