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

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

      
    Raw
  

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

第一种：
html

<div class="flex">
  <p>内容</p>
</div>

css

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

.flex p{
  margin:auto;
  
  /* 修饰作用 */
  background-color: #000000;
  padding:20px;
  color:#fff;
  font-size:40px;
  font-weight:700;
}

https://codepen.io/ghostcode/pen/WNxJdNN
第二种：
html

<div class="flex">
  <p>内容</p>
</div>

css

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

.flex{
  display:flex;
  align-items:center;
  justify-content:center;
  width:600px;
  height:600px;
  background-color:#ff9900;
}
.flex p{
  /* 修饰作用 */
  background-color: #000000;
  padding:20px;
  color:#fff;
  font-size:40px;
  font-weight:700;
}

https://codepen.io/ghostcode/pen/gOMzoOq