CSS如何设置flex的子元素为height: 100%;和align-items: center;

display: flex;如果指定和align-items: center;，子元素将垂直对齐，但height: 100%;指定不起作用。

但是，display: flex;如果只是，align-items: stretch;由于默认值，看起来是100% height，但是这次不能垂直居中。

由于需要同时实现子元素的状态height: 100%;，所以这次我将解释如何做到这一点。align-items: center;

height: 100%;align-items:center;如何让它看起来像

我使用了这样的代码。

<div class="parent"> 
  <div class="child">子元素</div>
</div>

.parent {
  display: flex;
}
.child {
  display: flex;
  align-items: center;
  height: 300px;
}

首先，使父元素这时候align-items如果不指定的话，就会align-items: stretch;默认命中，子元素hegiht: 100%;就会有这样的感觉（指定height:100%；不好）。

并在子元素中指定display: flex;and 。align-items: center;然后，父元素和align-items: stretch;子元素就会垂直居中，同时让子元素感觉像这样。align-items: center;height; 100%;

即使你给子元素一个固定的 px 高度，它也会垂直居中。

我要注意的height: 100%;是，指定 flex 的子元素是没有意义的。

嗯，很简单的说，指定display: flex;一个子元素display: flex; align-items: center;就可以了。

结语

指定flex元素height: 100%;是没有意义的，所以设置为100%的时候是无法垂直对齐的，但是如果把角色划分到父元素和子元素之间，就可以像这次一样打height: 100%;了align-items: center;。

了解一下可能会有好处，因为偶尔会用到它。