如何让一个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. Mariadb 索引及外键

    索引 索引相当于一本书的目录,在一个数据库或表有索引的情况下,会很便于查询数据,使查询更加效率,相对的也有缺点,不利于去修改,比较麻烦,有索引便于查询,那就意味着索引创建的越多越好么?然而并不是:索引 ...

  2. PHP mysql 连接ipV6地址

    需要在PHP页面中通过ipv6连接数据库,但是发现无论是用mysql_connect还是mysqli_connect,如果host是ipv6格式,就不能正常连接,会提示“php_network_get ...

  3. ppp点对点协议

    直接链接两个信令点的一组链路称作什么? PPP点到点连接: 点对点协议(PPP)为在点对点连接上传输多协议数据包提供了一个标准方法.PPP 最初设计是为两个对等节点之间的 IP 流量传输提供一种封装协 ...

  4. 关于ExecuteNonQuery执行存储过程的返回值 、、实例讲解存储过程的返回值与传出参数、、、C#获取存储过程的 Return返回值和Output输出参数值

    关于ExecuteNonQuery执行存储过程的返回值 用到过ExecuteNonQuery()函数的朋友们在开发的时候肯定这么用过. if(cmd.ExecuteNonQuery("xxx ...

  5. bzoj 1090 字符串折叠

    题目大意: 折叠的定义如下: 1. 一个字符串可以看成它自身的折叠.2. X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S)=SSSS…S(X个S). 3. 如果A=A’, B=B’, ...

  6. Ubuntu 14.04 台式机锐捷使用:

    1.解压文件:RG_Supplicant_For_Linux_V1.31.zip2.sudo chmod -R 777 rjsupplicant3.进入文件夹(./rjsupplicant.sh -a ...

  7. 【高德地图API】地理编码与逆地理编码

    一.地理编码 该功能实现地理编码服务,即地址匹配,从已知的地址描述到对应的经纬度坐标的转换,即根据地址信息,查询该地址所对应的点坐标等,地址(address) 为必选项,城市(city)为可选项. & ...

  8. 2-6 ES6常用语法

  9. ubuntu/linuxmint如何添加和删除PPA源

    [添加] 1.sudo add-apt-repository ppa:user/ppa-name 2.sudo apt-get update (然后再安装软件sudo apt-get install ...

  10. NestedPreb

    屌丝手动版 One of the things we’re sorely missing from Unity is nested prefabs. So we rolled this little ...