Question

我只在Chrome中遇到特定的弹性箱对齐问题：

在以下需要在大屏幕上查看的情况下，右边的两个DIV（包含标题和文本的那些）应该在其父容器内垂直居中，并且 - 因为左边的图像决定了高度父母的 - 应该与图像的垂直中心对齐。

父元素相关设置是

.container_3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify content: center;
  height: 100%;
  max-height: 480px;
}

如果我删除了max-height设置并将height设置为480px而不是100％，则内容也会在Chrome中垂直居中。但在其他浏览器中，它的工作方式与现在一样，我需要高度/最大高度组合才能实现响应......

注意：我省略了媒体查询，但三个容器的特定外部结构是由于响应性（元素将在不同的屏幕上换行）。

我在codepen中也有代码，但以下代码段中的代码没有区别：https://codepen.io/anon/pen/MOLjBZ

＆＃13;

html,
body {
  height: 100%;
}
.container_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  border: 1px solid green;
}
.container_1 img {
  display: block
}
.container_2 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid red;
}
.container_3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  max-height: 480px;
  width: 990px;
  border: 1px solid blue;
}
.container_3 > div {
  width: 480px;
  border: 1px solid yellow;
}

＆＃13;

<div class="container_1">
  <div class="container_2">
    <div class="container_3">
      <div class="element_1>">
        <img src="http://placehold.it/400x400/dca?text=logo image"></div>
      <div class="element_2>">
        <h1>This is a Header</h1>
      </div>
      <div class="element_3>">
        <p>This text, including its header, should be vertically centered due to its parent elements setting "justify content: center". That element (".container_3", blue border) has "display: flex", "flex-direction: column" and "flex-wrap: wrap").</p>
        <p>This works in all browsers except Chrome...</p>
        <p>The relevant detail: ".container_3" has "height: 100%;" and "max-height: 480px;". If I erase the "max-height" setting and set "height" to 480px, the content will center vertically also in Chrome. But in other browsers it works the way it is now, and i need that max-height for responsiveness...</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

在Chrome中柔性包裹垂直居中对齐

0 个答案: