tankcong/Flex实现水平垂直居中.md

## Flex实现水平垂直居中.md

      
    Raw
  

              Flex实现水平垂直居中.md
            
          
    水平垂直居中是前端的痛，也是前端__永恒__话题，这次记录两个用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<script src="http://static.jsbin.com/js/embed.js"></script>