学了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 ...
随机推荐
- Asp.Net_Session跟Cookie的记住登陆名
最近在做ASP.NET的项目时,接触到了登陆权限模块,所有总结了一下登陆时用到的知识和方法技巧. 如图说明:实现的效果如图,由于验证码验证比较简单这里就不介绍了 首先用代码生成器生成项目,以三层为例进 ...
- Linux 僵尸进程
Linux 允许进程查询内核以获得其父进程的 PID,或者其任何子进程的执行状态.例如,进程可以创建一个子进程来执行特定的任务,然后调用诸如 wait() 这样的一些库函数检查子进程是否终止.如果子进 ...
- hdu 2036:改革春风吹满地（叉积求凸多边形面积）
改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- 关于Map迭代循环，key和value的顺序问题
使用Hashtable,keySet()返回的顺序为降序(key降顺序) ---->6, 5, 4, 3, 2, 1使用TreeMap,keySet()返回的顺序为升序(key升顺序) ---- ...
- 再探Redux Middleware
前言 在初步了解Redux中间件演变过程之后,继续研究Redux如何将中间件结合.上次将中间件与redux硬结合在一起确实有些难看,现在就一起看看Redux如何加持中间件. 中间件执行过程 希望借助图 ...
- DevOps架构下如何进行微服务性能测试？
一. 微服务架构下的性能测试挑战 微服务与DevOps 微服务是实现DevOps的重要架构 微服务3S原则 DevOps核心点 微服务架构下的业务特点 亿级用户的平台 单服务业务随时扩容 服务之间存在 ...
- 详解JavaScript中的Event Loop（事件循环）机制
前言 我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言.这是由其最初的用途来决定的:与浏览器交互. 单线程意味着,javascript代码在执行的任何时候,都只有一个主线程 ...
- Notes of Daily Scrum Meeting（12.17）
我们会尽量安排好时间,在其他作业不受影响的情况下加快项目的进度,在Deadline之前完成Beta阶段的工作. 今天的团队工作总结如下: 团队成员 今日团队工作 陈少杰 调试网络连接,补充后端代码 王 ...
- HashMap相关总结
1.HashMap:根据键值hashCode值存储数据,大多数情况下可以直接定位到它的值,但是遍历顺序不确定.所有哈希值相同的值存储到同一个链表中 Ha ...
- Linux命令（二十二） 改变文件权限 chomd
目录 1.命令简介 2.常用参数介绍 3.实例 4.直达底部 命令简介 chmod 命令是用来改变文件权限或目录的命令,可以将指定文件的拥有着改为指定的用户或组,用户可以是用户名或用户ID,组可以是组 ...