如何让一个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. boost::mpl::eval_if的使用方法

    近期看boost的时候总是遇见这个eval_if,不知道啥意思,就没法看下去了,比方 前篇文章boost::serialization 拆分serialize函数分析时就出现这样一段代码: templ ...

  2. 关于mysql建立索引 复合索引 索引类型

    这两天有个非常强烈的感觉就是自己在一些特别的情况下还是hold不住,脑子easy放空或者说一下子不知道怎么去分析问题了,比方,问"hash和btree索引的差别",这非常难吗.仅仅 ...

  3. js全局替换空格,制表符,换行符

    this.value = this.value.replace(/\s+/g,'') "/ "这个是固定写法, "\s"匹配任何不可见字符,包括空格.制表符.换 ...

  4. gradle使用笔记

    1 gradle user home 默认情况下是-/.gradle目录.可以使用gradle -g [directory]修改. 1.1 ./gradle/caches gradle下载的所有的依赖 ...

  5. SoapUI中的RegEx

    在for Content matching RegEx中

  6. ARM+llinux系统移植3G拨号上网收发短信(一)【转】

    本文转载自:http://blog.csdn.net/hanmengaidudu/article/details/17099737 一.      PPP移植 各项工作具体说明 向Linux内核添加3 ...

  7. 牛客网9.9比赛 C 保护

    题目大意: n个城市构成一个树 m支军队 每只军队守卫 在xi到yi的最短路径上的城市 q个重要人物从vi出发 找到离根最近的点使从vi到这个点上所有路径都可以被至少ki个军队完全覆盖 输出每个答案的 ...

  8. 32.ExtJS简单的动画效果

    转自:http://blog.sina.com.cn/s/blog_74684ec501015lhq.html 说明:这篇文章的大部分内容来源于网上,经过自己实现其效果后,整理如下: 在进行 Java ...

  9. springcloud 向Eureka中注册服务异常java.net.ConnectException: Connection refused: connect

    异常如下: 通过debug发现,服务端的url地址仍然是默认的http://localhost:8761/eureka/apps/,也就是说yml文件中配置没有生效,检查后发现yml中相关配置多写了一 ...

  10. PCB Genesis拼SET画工艺边 实现方法(一)

    在PCB行业中,客户提供的PCB尺寸较小,为方便PCB加工,并生产提高生产效率,通常小于80X80mm需拼板处理的, 拼板要求可能来自按户指定拼板,也有可能是由工厂自行拼板,但对于CAM来说就需将PC ...