以前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