学了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的底部 实现代码如下：
<head>
<style>
body{margin: 0; padding: 0 ;}
.header,.footer{height: 100px;background-color:#ccc;}
.cc{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #ccc;
min-height: calc(100vh - 200px);
}
</style>
</head>
<body>
<div class="header">by lpy</div>
<div class="content">
<div class="cc">
<div>content</div>
</div>
</div>
<div class="footer">by lpy</div>
</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
学了display：flex垂直居中容易多了的更多相关文章
- flex垂直居中
最近遇到一个令我绞尽脑汁的布局 T.T.T.T,分享下.重点--垂直居中. 布局说明:1. 场次为一场比赛 2. 比赛双方是交战的两个队伍 3. 一场比赛可以有多种玩法,所以场的每个玩法的布局的高度都 ...
- display:box；display:flex；弹性盒模型
display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...
- flex 垂直居中、两列对齐、自适应宽
flex 垂直居中 <div id="parent"> <div id="child"> </div> </div&g ...
- 1.display:flex布局笔记
/*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...
- display:flex 布局教程，弹性布局！
display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
- display:flex代替float
昨天做一个css的东西,在开始用js的时候才发现被float占位了 因为float浮动起来了,我清除了浮动,但是还是占位 然后我同事就告诉我其实可以不用float来左右浮动 在父元素上用display ...
- HTML/CSS：display:flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- display Flex 盒子模型布局兼容Android UC
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content= ...
- 弹性盒模型display:flex
Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...
随机推荐
- 《Pro SQL Server Internals, 2nd edition》中CHAPTER 7 Designing and Tuning the Indexes中的Clustered Index Design Considerations一节（译）
<Pro SQL Server Internals> 作者: Dmitri Korotkevitch 出版社: Apress出版年: 2016-12-29页数: 804定价: USD 59 ...
- PAT甲题题解-1039. Course List for Student (25)-建立映射+vector
博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789157.html特别不喜欢那些随便转载别人的原创文章又不给 ...
- 20135202闫佳歆--week6 课本第三章学习笔记
第三章 进程管理 一.进程 1.进程 进程就是处于执行期的程序. 进程就是正在执行的程序代码的实时结果. 进程是处于执行期的程序以及相关的资源的总称. 进程包括代码段和其他资源. 2.线程 执行线程, ...
- LeetCode 88. 合并两个有序数组
题目: 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m ...
- SQL Sever——远程过程调用失败（0x800706be）
最近重装了系统,VS和SQL Sever莫名奇妙的不能用了.下面总结一下这个过程中遇到的问题,跟大家分享一下经验~~ 大概是以前的安装过程都十分顺利,这次,在尝试了数次登陆不上去之后,我仍然怀疑是自己 ...
- VMware虚拟机安装ghost win7系统方法
原本地址:http://www.xitongcheng.com/jiaocheng/xtazjc_article_15314.html
- java配置环境变量与常用技巧
一.java入门 --->java平台 •Java SE Java Platform,Standard Edition-Java平台标准版. •Java EE Java Platform,Ent ...
- PSP（4.6——4.12）以及周记录
1.PSP 4.6 8:30 10:30 20 100 博客 B Y min 12:00 13:00 5 55 Account A Y min 13:05 13:15 0 10 站立会议 A Y mi ...
- delphi制作登陆窗体
delphi登陆窗体的制作,就我知道的,可以有两种方法,一种是在工程文件中实现登陆窗体的动态调用,另一种就是在主窗体的OnCreate事件中动态创建登陆窗体,两种方法都需要将主窗体设置为Auto-cr ...
- 【转】maven常用插件介绍
我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...