如何让一个div里面的div垂直居中?

如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间。上面有整个布局和样式表,谢谢高手指点

CSS3时代当然要用CSS3的完美解决办法。不能忍受以前的height和line-height同高等等的解决方法,想想都觉得不优雅。

用CSS3中的flexbox 布局模式:

.vertical-container{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

CSS里总算是有了一种简单的垂直居中布局的方法了!

如何让一个div里面的div垂直居中?的更多相关文章

  1. 后台找到repeater里面的div并添加客户端点击事件

    public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...

  2. 里面的div怎么撑开外面的div,让高度自适应

    关于容器高度自适应的兼容性问题.1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-h ...

  3. 里面的div怎么撑开外面的div让高度自适应

    参考网址:http://www.jb51.net/css/140685.html 随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人 ...

  4. 实现div里的内容垂直居中

    ---恢复内容开始--- 在项目中我们会遇到这种情况,一个div的宽固定,里面的内容长度不定,不管是一行还是多行,都要垂直居中,有俩个实现方法: 1.使用absolute,top:50%,transf ...

  5. Activity往另外一个Activity传值,Fragment获取另外一个Activity里面的值。

    在oneActivity中实现跳转到MainActivity //intent 用来跳转另外一个MainActivity,bundle传值到MainActivity         Intent Ma ...

  6. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  7. Div中嵌套一个div,怎么是里面的div居中?

    盒子居中是在写样式中经常遇到的问题,在这里说个我经常使用的方法~ 利用绝对定位:

  8. div里面的margin-top失效

    div标签中的元素margin-top失效的解决方法 元素上级标签是div,已经设置了width和height等的属性,可是,在对元素使用margin进行调整的时候,无法生效,下面有个不错的解决方法, ...

  9. 出发a链接里面的div,a链接不进行跳转

    HTML <a href="http://www.baidu.com" style="display: inline-block; width: 100%; hei ...

随机推荐

  1. WebLog Expert

    Weblog expert是一个快速和强大的访问日志分析器.这会让你了解你的网站的访客:活动统计,访问的文件的路径,通过该网站,信息指页面,搜索引擎,浏览器,操作系统,和更多.该计划所产生的易于阅读的 ...

  2. 抢占式内核与非抢占式内核中的自旋锁(spinlock)的差别

    一.概括 (1)自旋锁适用于SMP系统,UP系统用spinlock是作死. (2)保护模式下禁止内核抢占的方法:1.运行终端服务例程时2.运行软中断和tasklet时3.设置本地CPU计数器preem ...

  3. nginx-Proxy Cache缓存

      1.创建目录 mkdir /export/Data/nginx_proxy_cache mkdir /export/Data/nginx_proxy_temp   2.修改http,打开缓存 文件 ...

  4. OpenCV 2.4.8 or OpenCV 2.4.9组件结构全解

    近期发现了一个好的opencv博客,准备依照他的顺序系统学习opencv,而且会一一转载过来 之前啃了不少OpenCV的官方文档,发现假设了解了一些OpenCV总体的模块架构后.再重点学习自己感兴趣的 ...

  5. 稀疏表达是要求信号在该模型下的sparse code,只有少数的non-zero elements

    为什么sparse representation比起其它成分分析方法(DFT,Wavelet)能得到更好的效果? - 知乎  https://www.zhihu.com/question/241241 ...

  6. rsync单向同步

    系统版本:Centos X64 6.4(最小化安装) 先安装依赖包 [root@localhost ~]# yum install vim wget lsof gcc make cmake makec ...

  7. Eclipse导入Java 的jar包的方法

    打开eclipse1.右击要导入jar包的项目,点properties 2.左边选择java build path,右边选择libraries 3.选择add External jars 4.选择ja ...

  8. P4097 [HEOI2013]Segment

    传送门 简单来说就是对于每条线段,先把它拆成\(O(logn)\)条,然后对于每一条再\(O(logn)\)判断在所有子区间的优劣程度 //minamoto #include<bits/stdc ...

  9. PostgreSQL逻辑复制之pglogical篇

    PostgreSQL逻辑复制之slony篇 一.pglogical介绍 pglogical 是 PostgreSQL 的拓展模块, 为 PostgreSQL 数据库提供了逻辑流复制发布和订阅的功能. ...

  10. 思维题+set URAL 1718 Rejudge

    题目传送门 /* 题意:数据加10组,再删掉第6组数据,问rejudge后最少最多几个作者收到邮件 思维题:当错在6时结果是不一定,错在7时是一定改变,因为会变成6 思路没错,但用结构题排序一直WA, ...