如何使两个div居中两行

Question

我有两个区块（DIV）并且两个区域都在屏幕中心，我想按照附件逐行保持这些区域，请注意父div位于display:flex

.wrapper{
width:100%;
float:left;
background:#ccc;
align-items: center;
display: flex;
}
.div1 {
margin: 10px auto;
width: 300px;
border: 1px solid #000;
background: #fff;
}
.div2 {
margin: 10px auto;
width: 300px;
border: 1px solid #000;
background: #fff;
}

<div class="wrapper">
   <div class="div1"> Block 1 </div>
   <div class="div2"> Block 2 </div>
</div>

Answer 1

当您使用flexbox时，使用flex-direction: column将 flex-axis 更改为垂直。

请参阅下面的代码段：

＆＃13;

＆＃13;

.wrapper {
  width: 100%;
  float: left;
  background: #ccc;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.div1 {
  margin: 10px auto;
  width: 300px;
  border: 1px solid #000;
  background: #fff;
}
.div2 {
  margin: 10px auto;
  width: 300px;
  border: 1px solid #000;
  background: #fff;
}

＆＃13;

<div class="wrapper">
  <div class="div1">Block 1</div>
  <div class="div2">Block 2</div>
</div>

＆＃13;

＆＃13;

＆＃13;