以前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垂直居中容易多了的更多相关文章

  1. flex垂直居中

    最近遇到一个令我绞尽脑汁的布局 T.T.T.T,分享下.重点--垂直居中. 布局说明:1. 场次为一场比赛 2. 比赛双方是交战的两个队伍 3. 一场比赛可以有多种玩法,所以场的每个玩法的布局的高度都 ...

  2. display:box；display:flex；弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  3. flex 垂直居中、两列对齐、自适应宽

    flex 垂直居中 <div id="parent"> <div id="child"> </div> </div&g ...

  4. 1.display:flex布局笔记

    /*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...

  5. display:flex 布局教程，弹性布局！

    display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...

  6. display:flex代替float

    昨天做一个css的东西,在开始用js的时候才发现被float占位了 因为float浮动起来了,我清除了浮动,但是还是占位 然后我同事就告诉我其实可以不用float来左右浮动 在父元素上用display ...

  7. HTML/CSS：display:flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  8. display Flex 盒子模型布局兼容Android UC

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta content= ...

  9. 弹性盒模型display:flex

    Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...

随机推荐

  1. RabbitMq基础教程之基本概念

    RabbitMq基础教程之基本概念 RabbitMQ是一个消息队列,和Kafka以及阿里的ActiveMQ从属性来讲,干的都是一回事.消息队列的主要目的实现消息的生产者和消费者之间的解耦,支持多应用之 ...

  2. 4星|《流量池》：Luckin Coffee营销操盘手经验谈

    流量池:“急功近利”的流量布局.营销转化 作者是一线营销操盘手,全书是作者的经验总结,这样的作者在营销类图书中比较罕见,因此这本书非常有价值. 全书是写给巨头之外的企业营销人员看的,这样的企业的流量来 ...

  3. 在Linux系统中安装caffe

    学习深度学习已经很久了,但一直没有自己动手安装过caffe,因为工作需要,需要在linux系统中安装caffe,因此,在这里对安装过程进行记录. caffe配置起来比tensorflow更麻烦一些,我 ...

  4. 《Linux内核设计与实现》读书笔记——第五章

    <Linux内核设计与实现>读书笔记--第五章 标签(空格分隔): 20135321余佳源 第五章 系统调用 操作系统中,内核提供了用户进程与内核进行交互的一组接口.这些接口让应用程序受限 ...

  5. "Gun N' Rose" Team学习心得

    如果我比别人看得更远,只因为我站在巨人的肩膀上.                                                        ——牛顿 高级软件工程课程终于开课了!第 ...

  6. 什么是GPS的冷启动、温启动和热启动？

    对于GPS多种启动方式的概念还很模糊,冷启动.热启动.温启动各种专业术语铺天盖地,使得许多用户眼花缭乱. 我们简单从定义上了解一下几种GPS启动的方式,GPS开机启动分为冷启动.温启动.热启动三种. ...

  7. final版本发布评价II

    其实我对技术上的问题了解不多,所以有些评语可能说的不对或者压根就没啥用.可直接忽略.请见谅. 1新蜂的俄罗斯方块,UI设计虽然给出了背景和颜色,但是感觉色彩对比也不好,模块之间也不协调.没有更多的说服 ...

  8. Docker in Docker的安装 路不通

    1. 先启动centos 镜像 然后 再docker cp文件 然后再执行安装报错 [root@CentOS75 ~]# docker run -it centos /bin/bash [root@1 ...

  9. App phonegap

    云端打包 https://build.phonegap.com/apps phonegap PC端下载 https://www.phonegap.com/getstarted/ 移动端下载 https ...

  10. photoshop cc 2018破解补丁(pscc2018注册机) 附使用方法

    1.下载破解程序 破解文件自行到  http://www.ddooo.com/softdown/109954.htm 下载 博主可以到本博客的文件-->pscc2018zcj_109954.ra ...