Flexbox 不会垂直对齐内容

Posted 2023-03-05

【中文标题】Flexbox 不会垂直对齐内容

【英文标题】：Flexbox won't vertically align content

【发布时间】：2016-02-03 18:31:21

【问题描述】：

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

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

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

body, html:
    height: 100%

这些似乎不起作用。

【问题讨论】：

尝试垂直居中具有height: 100vh; 的元素有多大意义？请记住，您的弹性项目是您的section.initial，不是它的内容。

我正在尝试（或正在尝试）对齐 lorem ipsum 文本。我已更新问题以澄清这一点。

您在此处提到的正文、html 高度建议已为我修好了，值得。

【参考方案1】：

你的 SASS 应该是：

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

将那个元素的内容对齐，因为flexbox布局不被子级继承。

Codepen Demo

【参考方案2】：

当你创建一个弹性容器时，只有子元素成为弹性项目。子级之外的后代不会成为弹性项目，弹性属性不适用于它们。

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

您需要将<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

【参考方案3】：

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

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

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

【参考方案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>