以前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. sass:常用备忘

    一.变量 所有变量以$开头 $font_size: 12px; .container{ font-size: $font_size; } 如果变量嵌套在字符串中,需要写在#{}中 $side : le ...

  2. 01-docker简介

    如今Docker的使用已经非常普遍,特别在一线互联网公司.使用Docker技术可以帮助企业快速水平扩展服务,从而到达弹性部署业务的能力.在云服务概念兴起之后,Docker的使用场景和范围进一步发展,如 ...

  3. 第二个Sprint冲刺第五天(燃尽图)

  4. 为什么java的main方法必须是静态的

    今天看类型信息时发现一个问题,不能再main方法中打印this关键字的信息,这时想起了之前的知识,不能再静态方法中调用this.理由很简单,this表示“这个对象”,也就是声明一个类的对象,然而静态方 ...

  5. Python之路3【知识点】白话Python编码和文件操作(截载)

    无意发现这篇文章讲的比较好,存下来供参考: http://www.cnblogs.com/luotianshuai/p/5735051.html

  6. springboot+mybatis结合使用

    springboot+mybatis结合使用与普通的ssm配置差别不大,但是少了很多的配置,如spring.xml  web.xml,  给程序员减轻了很多负担 首先创建带有mybatis框架的项目 ...

  7. JMeter学习笔记——认识JMeter(1)

    拿到一个自动化测试工具,我们第一步就应该了解它能提供我们哪方面的功能(最直接的方法就是从官网获取),接下来就是简单的对这个工具进行“功能测试”了,当然这里的功能测试不是让你找它存在的bug,而是让自己 ...

  8. C语言入门:04.数据类型、常量、变量

    一.数据 1.什么是数据 生活中时时刻刻都在跟数据打交道,比如体重数据.血压数据.股价数据等.在我们使用计算机的过程中,会接触到各种各样的数据,有文档数据.图片数据.视频数据,还有聊QQ时产生的文字数 ...

  9. Windows XP 安装使用的序列号

    SP3 X86 MRX3F-47B9T-2487J-KWKMF-RPWBY SP2 X64 B66VY-4D94T-TPPD4-43F72-8X4FY 注意 X64 没有SP3的包 用的是跟 2003 ...

  10. 在laravel中,使用DB查询数据库后,返回的对象,可以用下面的办法变为数组

    $nodes = Db::table('account')->orderBy('sort', 'asc')->orderBy('id' ,'asc')->get()->map( ...