Cacher is the code snippet organizer for pro developers

水平垂直居中是前端的痛，也是前端永恒话题，这次记录两个用display:flex实现的方法：

第一种：

###html###

<div class="flex">
  <p>content content</p>
</div>

###css###

.flex{
  display:flex;
  width:600px;
  height:600px;
  background-color:#333;
}

.flex p{
  margin:auto;
}

第二种：

###html###

<div class="flex">
  <p>content content</p>
</div>

###css###

.flex{
  display:flex;
  align-items:center;
  justify-content:center;
  width:600px;
  height:600px;
  background-color:#333;
}

JS Bin