如何让一个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. yarn-cli 添加

    添加依赖包 当你想使用另一个包时,你要先把它添加到依赖列表中.也就是执行 yarn add [package-name] 命令将它安装到你的项目中. 这也将同时更新你的 package.json 和  ...

  2. RAD 极速应用开发 Spring ROO 入门样例

    官网                                      http://projects.spring.io/spring-roo/ Spring ROO in action   ...

  3. Swift新手教程系列5-函数+selector在swift中的使用方法

    原创blog.转载请注明出处 近期在用swift写代码,尽管遇到一些问题,可是代码量确实减了不少. swfit新手教程系列会随着我使用swfit中的积累,不断地去修正更新 之前的教程 swift单例模 ...

  4. [转] CVonline: Image Databases

    转自:CVonline by Robert Fisher 图像数据库 Index by Topic Action Databases Biological/Medical Face Databases ...

  5. Oracle 11g密码过期问题及解决方案

    问题: 在自用的一个系统里,连接的是本地自建的一个数据库.用sqldeveloper登录数据库.提示如下图: 提示:密码过期 解决方案: 密码过期一般存在两种可能: 由于Oracle中默认在defau ...

  6. codeforces 965E Trie+multiset

    E. Short Code time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  7. CodeFirst建模:DataAnotation

    示例一 新建一个控制台应用程序,并安装entityframework 新建一个文件Blog.cs类,输入以下代码: using System.ComponentModel.DataAnnotation ...

  8. Java IO --ByteArrayOutputStream (六)***

    Java提供了很丰富的io接口,已经可以满足我们大部分读取数据的需求,这个在C读取数据需要自己定义缓冲区数组大小,而且要小心翼翼的防止缓冲区溢出的情况相当不同.一般情况下我们读取的数据都是直接读取成为 ...

  9. 洛谷P3400 仓鼠窝(单调栈)

    P3400 仓鼠窝 题目描述 萌萌哒的Created equal是一只小仓鼠,小仓鼠自然有仓鼠窝啦. 仓鼠窝是一个由n*m个格子组成的行数为n.列数为m的矩阵.小仓鼠现在想要知道,这个矩阵中有多少个子 ...

  10. 清北考前刷题da5下午好

    /* (4,1)*(3,1)*(2,1)的话1变成2然后一直是2 2变成1然后变成3 3变成1然后变成4 4变成1 */ #include<iostream> #include<cs ...