Flex定位器在Firefox/Edge上工作，不在Chrome上

Question

我无法使用Chrome浏览器进行定位，但它同时适用于Firefox和Edge。

我使用Flex CSS：

body { 
     min-height: 100%; 
     display: flex; 
     flex-direction: column; 
    } 

    wrapper { 
     height: 100%; 
     /* flex: 1; would be enough but it looks bad in IE */ 
     flex: 1 0 auto; 
     background-color: #3D9970; 
    } 

    .aligner { 
     height:100%; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
    } 

    .aligner-center { 
     max-width: 50%; 
     background-color: #ffb443; 
     padding: 20px; 
    } 

你看结果here

我也试图与display:table没有成功。

任何想法如何将我的登录表单div与Chrome对齐？

感谢

Answer 1

，预计在Chrome的行为，因为它有一个严格执行Flexbox spec（take a look at this thread too）的：

1. 的align-self属性更改只的使用值默认拉伸值元素的cross size属性（在这种情况下为height）。

2. 百分比从父母的财产cross-size的明确规定值计算，而不是它的使用值。

百分率的计算相对于所生成的 框的包含块的高度。如果没有明确规定包含 块的高度（即，它取决于内容 高度），并且该元素没有被绝对定位，则值 计算为'auto'（Source: W3C）。

这意味着，设置在alignerheight:100%这是wrapper孩子（又一个flexbox的柔性孩子）。由于我们没有在wrapper上指定高度，这意味着它会选取默认高度的100％，即auto。

解决方案：

解决的办法之一就是让你wrapper一个flexbox太多，给width: 100%为aligner - 看演示如下：

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
wrapper { 
 
    height: 100%; 
 
    /* flex: 1; would be enough but it looks bad in IE */ 
 
    flex: 1 0 auto; 
 
    background-color: #3D9970; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.aligner { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.aligner-center { 
 
    max-width: 50%; 
 
    background-color: #ffb443; 
 
    padding: 20px; 
 
} 
 
body { 
 
    font: 16px/1.5 sans-serif; 
 
} 
 
p { 
 
    margin-bottom: 1em; 
 
} 
 
header, 
 
wrapper, 
 
footer { 
 
    padding: 2em; 
 
    color: white; 
 
} 
 
header { 
 
    background-color: #85144B; 
 
} 
 
footer { 
 
    background-color: #001F3F; 
 
}

<header> 
 
    Header 
 
</header> 
 
<wrapper> 
 
    <div class="aligner"> 
 
    <div class="aligner-center"> 
 
     Login Form 
 
    </div> 
 
    </div> 
 
</wrapper> 
 
<footer> 
 
    Footer 
 
</footer>