页面布局利器Flex

传统的布局解决方法,基于盒子模型,依赖position属性、display属性、float属性。它对于那些特殊布局非常不方便,比如垂直居中,本文主要介绍Flex实现垂直居中。

Flex浏览器支持:

 

Flex实现垂直居中:

  1. .demo{
  2.     width320px;
  3.     height320px;
  4.     border1px solid purple;
  5.     display: flex;                //设置为flex布局
  6.     justifycontentcenter;   //水平居中
  7.     align-items: center;     //垂直居中
  8. }
  9. .content {
  10.     width160px;
  11.     height160px;
  12.     font-size25px;
  13.     border1px solid red;
  14. }
  15. <div class=“demo”>
  16.     <div class=“content”>
  17.         <p>垂直居中测试垂直居中测试垂直居中测试垂直居中测试垂直居中测试</p>
  18.     </div>
  19. </div>

效果:

完。