堆叠的 flexbox 垂直居中在 chrome 中不起作用

Posted 2023-03-06

【中文标题】堆叠的 flexbox 垂直居中在 chrome 中不起作用

【英文标题】：Stacked flexbox vertical centering not working in chrome

【发布时间】：2015-03-14 22:40:42

【问题描述】：

以下情况在谷歌浏览器中不起作用；

<div class="flex-container">
    <div class="flex-item">
      <div>
        <div>
           <h2>This is a test</h2>
        </div>
       </div>
    </div>
    <div class="flex-item">
      <div>
        <div>
           <h2>This is a test</h2>
        </div>
       </div>
    </div>
    <div class="flex-item">
      <div>
        <div>
           <h2>This is a test</h2>
        </div>
       </div>
    </div>
</div>

SCSS

body,html 
  height:100%;
  background:#1D1F20;
  font-family:sans-serif;
  color:#fff;

.flex-container 
  display: flex;
  flex-direction: column;
  align-items: center;
  height:100%;
  .flex-item 
    flex: 1 1 auto;
    align-self: center;
    background:#87BEB7;
    padding:0 10px;
    &:nth-child(2) 
      background:#ADBEBC;
    
    &:nth-child(3) 
      background:#BE8A74;
    
    > div 
      display: flex;
      justify-content: center;
      align-items: flex-start;
      height:100%; // This seems to be the issue
      div 
        flex: 0 1 auto;
        align-self: center;
        background:#5C726F;
        padding:10px
      
    
  

我希望第二个 flexbox-container (.flex-item > div) 是 flex-child (.flex-item) 的完整高度，但它似乎不起作用。 （仅限铬）

我的解决方法是使用绝对位置，但我不想使用它。

Codepen：http://codepen.io/anon/pen/QwpzLX

在 Firefox 中打开以查看所需的结果，在 Chrome 中打开以查看当前情况。

任何帮助或建议将不胜感激。

【参考方案1】：

这是工作的 scss：

.flex-container 
    display: flex;
    flex-direction: column;
    align-items: center;
    height:100%;
    .flex-item 
        flex: 1 1 auto;
        align-self: center;
        background:#87BEB7;
        padding:0 10px;
        display: flex;

        &:nth-child(2) 
            background:#ADBEBC;
        
        &:nth-child(3) 
            background:#BE8A74;
        
        > div 
            display: flex;
            justify-content: center;
            align-items: flex-start;

            div 
                flex: 0 1 auto;
                align-self: center;
                background:#5C726F;
                padding:10px
            
        
    

您必须将display:flex; 设置为.flex-item 并删除height: 100%。

这里是演示：http://jsfiddle.net/omgL91r8/1/

【讨论】：

惊人的快速和正确！我希望我能给你一个赞成票。

我将它集成到我的网站中，并注意到现在所有内容都将默认垂直对齐到中间。 :(