flex实现水平中下居中

html结构

<div class="box">
  <div class="inner"></div>
</div>

CSS

.box{
  border: 1px solid #ccc;
  width: 600px;
  height: 300px;
  display: flex;
  background: #f0f0f0;
}
.inner{
  background: #ccc;
  width: 200px;
  height: 100px;
  border: 1px solid red;
}

默认未居中效果

实现中间块上下居中只需在.inner样式中填写

.inner{
  margin: auto;
}

或者在box父元素中添加样式

.box{
  align-items: center;
  justify-content: center;
}

居中显示