Question

到目前为止，我见过的所有flexbox教程都说使用align-items和justify-content进行垂直对齐并将两者设置为居中;但是这似乎没有用，正如你在下面看到的那样（我正在尝试对齐lorem ipsum文本）。我正在使用的浏览器是Chrome，如果这很重要的话。

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

我在Stack Overflow上尝试过很多建议，例如：

body, html:
    height: 100%

这些似乎不起作用。

Answer 1

你的SASS应该是：

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

将元素的内容与元素对齐，因为儿童不会继承Flexbox布局。

Codepen Demo

Answer 2

创建Flex容器时，只有子元素成为弹性项目。儿童以外的后代不会成为弹性物品，弹性属性也不适用于它们。

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

您需要使<section>成为（嵌套的）Flex容器，以便将flex属性应用于<p>。

试试这个：

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

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

DEMO：http://codepen.io/anon/pen/xwJjvO

Answer 3

您已使用flexbox在容器内部布置了部分，如Codepen所示，这样可以得出所有三个部分都显示在彼此之下的结果。

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

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

Answer 4

由于您要在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>

Flexbox不会垂直对齐内容

4 个答案: