html - 如何使两个div在两行中居中

Question

我有两个 block (DIV) 并且都以屏幕为中心，我想按照附件中的说明逐行保持这些 block 垂直，请注意父 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 更改为垂直。

请看下面的片段:

.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;
}

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