以前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
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
