如何垂直居中弹性框项目的内容

Posted 2023-03-05

【中文标题】如何垂直居中弹性框项目的内容

【英文标题】：How to vertically center the contents of a flexbox item

【发布时间】：2015-03-31 00:25:01

【问题描述】：

我试图在使用justify-content:stretch; 时将弹性框项目的内容居中，看来使用display:table-cell;vertical-align:middle; 的旧技巧在这种情况下不起作用。有什么作用？

.flex-container 
    display:flex;
    align-items:center;
    justify-content:stretch;

.flex-item 
    align-self:stretch;


<div class="flex-container">
    <div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>

在你回答之前：我的问题似乎很混乱。我正在尝试将弹性项目的 CONTENTS 居中。使用justify-content:stretch，项目的高度将拉伸到容器的整个高度，但项目的内容会浮动到顶部（至少在 Chrome 中是这样）。

“一张图片胜过一千个字。” (A) 是我已经拥有的。 (B) 是我想要的。

【参考方案1】：

可以通过display将每个flex item作为flex容器，然后通过align-items属性垂直对齐内容来实现，如下：

.flex-container 
  display:flex;
  align-items:center;
  height: 200px; /* for demo */


.flex-item 
  align-self:stretch;
  display:flex;
  align-items:center;
  background-color: gold; /* for demo */

<div class="flex-container">
    <div class="flex-item">
      I want to be vertically centered!
      <s>But I'm not.</s>
  </div>
</div>

附带说明，如果您省略 .flex-container 的 align-items:center; 声明，您也可以安全地从弹性项目中删除 align-self:stretch;。

【讨论】：

我在移动 Safari 中看到内容顶部对齐。这是一个已知问题吗？

@SDP 确保您也包含了-webkit- 前缀。 ios Safari 7.1-8.1 支持 flexbox 的新语法，但只有-webkit- 前缀，即display: -webkit-flex; 和-webkit-align-items: center;。对于旧版本，您必须使用 old flexbox syntax 包括 -webkit- 前缀。

stretch 不是justify-content 的有效值。有效值为flex-start | flex-end | center | space-between | space-around

顺便说一句：之所以可行，是因为 .flex-item 中包含的文本被视为“匿名内联框”。 – 我不是在编造这个，see the W3C spec 和这个cool answer

【参考方案2】：

我不确定我是否正确解释了您的请求，但我认为您正在尝试使用“justify-content:stretch;”什么时候应该使用 flex-grow。

我的示例是我使用 flex:1 auto;这只是设置几个 flex 属性的简写。

html：

<div class="flex-container">
    <div class="flex-item">I'm top dog!
    </div>
    <div class="flex-item flex-center">
        I want to be vertically centered! And I am!
    </div>
</div>

CSS：

*
    box-sizing:border-box;
    padding:5px;

.flex-container 
    border: 1px solid;
    display:flex;
    align-items:center;
    height: 100px;

.flex-item 
    flex: 1 auto;
    border: 1px solid green;
    height:100%;
    display:flex;
    justify-content:center;

.flex-center 
    align-items: center;

http://jsfiddle.net/p28tjskq/

弹性属性：https://developer.mozilla.org/en-US/docs/Web/CSS/flex