flexbox-减少垂直间距

Question

如何减小文本之间的垂直间距并使文本中心对齐？

.item{
  border: 1px solid;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: 200px;
  margin: 4px;
  float: left;
  text-align: center;
  width: 200px;
}
h3, h4{
  margin: 0;
  width: 100%;
}

<div class="item">
  <h3>Title1</h3> 
  <h4>Title2</h4>
</div>
<div class="item">
  <h3>Title1</h3> 
  <h4>Title2</h4>
</div>
<div class="item">
  <h3>Title1</h3> 
  <h4>Title2</h4>
</div>
 

Answer 1

删除flex-wrap: wrap;并添加justify-content: center; flex-direction: column;

.item{
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 200px;
  margin: 4px;
  float: left;
  text-align: center;
  width: 200px;
}
h3, h4{
  margin: 0;
  width: 100%;
}

<div class="item">
  <h3>Title1</h3> 
  <h4>Title2</h4>
</div>
<div class="item">
  <h3>Title1</h3> 
  <h4>Title2</h4>
</div>
<div class="item">
  <h3>Title1</h3> 
  <h4>Title2</h4>
</div>