学了display：flex垂直居中容易多了

以前div内部的文字垂直居中，使用height = line-height，现在可以使用display:flex来实现了

.div{

　　display:flex;

　　align-items:center;

}

使用div类，不仅可以实现div内部的文字居中，还可以使内部的div也垂直居中，多年来一直希望实现的网页header，content，footer布局也可以实现了。

实现：
    1.页面分三部分，header，content，footer，header一直紧贴浏览器的头部
    2.当页面内容不到浏览器的一屏时，footer紧贴浏览器的底部，content中的内容垂直居中
    3.当页面内容超过浏览器的一屏时，content的div高度自动拉伸，footer紧贴content的底部

实现代码如下：

 1 <head>
 2     <style>
 3         body{margin: 0; padding: 0 ;}
 4         .header,.footer{height: 100px;background-color:#ccc;}
 5         .cc{
 6             display: flex;
 7             align-items: center;
 8             justify-content: center;
 9             width: 100%;
10             background-color: #ccc;
11             min-height: calc(100vh - 200px);
12     }
13     </style>
14 </head>
15 <body>
16 <div class="header">by lpy</div>
17 <div class="content">
18     <div class="cc">
19             <div>content</div>
20     </div>
21 </div>
22 <div class="footer">by lpy</div>
23 </body>

效果如下：
1.内容少于一屏，content中的内容自动垂直居中


2.内容多于一屏，footer紧贴content



【注意】关于calc使用

使用Calc: 计算容器的宽和高 
　　>使用“+”、“-”、“*” 和 “/”四则运算； 
　　>可以使用百分比%、px、em、rem等单位； >可以混合使用各种单位进行计算； 
　　>表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 
　　>表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。 
　　>Viewport viewport：可视窗口，也就是浏览器。 
　　　　vw Viewport宽度， 1vw 等于viewport宽度的1% 
　　　　vh Viewport高度， 1vh 等于viewport高的的1% 
　　　　例如 ：设置div元素的高度为当前窗口高度-100px 
　　　　　　div{ height: calc(100vh - 100px); } 
　　　　例如 ：设置div元素的宽度为容器100%-50px 
　　　　　　div{ height: calc(100% - 50px); }

更多flex知识，弹性盒子布局flexbox：
    3 分钟掌握 CSS Flexbox
    详解flexbox

一直走下去，不容易