CSS flex布局使div上下左右垂直居中

CSS flex布局使div上下左右垂直居中

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为未来布局的首选方案。本文主要介绍利用Flex实现垂直居中布局，代码如下：

html部分

	

	       
居中部分
	


style部分
   .main{
      display: flex;
      width: 100%;  //需要设置父元素的宽度和高度
      height: 100%;
      border: 1px solid #2b333f;
      box-sizing: border-box;
    }
    .middle{
      margin: auto;
    }

PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键。