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）：

align-self属性的默认拉伸值仅更改元素的cross size属性（height中的使用值情况）。
百分比是根据父级cross-size媒体资源的明确指定的值计算的，而不是使用的值

百分比是根据高度来计算的生成的包含块的块。如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的值计算自动＆＃39; （Source: W3C）。

这意味着在height:100%上设置aligner，wrapper是flexbox的子项（反过来是wrapper的子项）。由于我们尚未在auto指定高度，这意味着它将选择默认高度的100％，即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; } - 请参阅下面的演示：

＆＃13;

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

＆＃13;

pixel_matrix[i]

＆＃13;

Flex对齐器在Firefox / Edge上工作，而不是Chrome

1 个答案: