如何让一个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. create-react-app 引入 antd 及 解决 antd 样式无法显示的bug

    方案一: npm run eject 暴露所有内建的配置 安装组件库 yarn add antd babel-plugin-import 根目录下新建.roadhogrc文件(别忘了前面的点,这是ro ...

  2. [tarjan] 1827 Summer Holiday

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1827 Summer Holiday Time Limit: 10000/1000 MS (Java/ ...

  3. (十)Net Core项目使用Cookies (八)Net Core项目使用Controller之三-入参

    (十)Net Core项目使用Cookies 一.简介 1.Net Core可以直接使用Cookies,但是调用方式有些区别. 2.Net Core将Request和Response分开实现. 二.基 ...

  4. Thinking in Java---多线程仿真:银行出纳员仿真+饭店仿真+汽车装配工厂仿真

    多线程一个非常有意思的作用就是用于仿真,这篇博客就会结合几个仿真实例来综合运用一下前面所学的多线程并发知识. 一.银行出纳员仿真 问题描写叙述:银行会有非常多来办业务的顾客,他们会排队等待服务:对于银 ...

  5. mouse_event function

    https://msdn.microsoft.com/en-us/library/windows/desktop/ms646260(v=vs.85).aspx

  6. hdu 4990 Reading comprehension(等比数列法)

    题目链接:pid=4990" style="color:rgb(255,153,0); text-decoration:none; font-family:Arial; line- ...

  7. YTU 2505: 啤酒和饮料

    2505: 啤酒和饮料 时间限制: 1 Sec  内存限制: 128 MB 提交: 850  解决: 318 题目描述 啤酒每罐2.3元,饮料每罐1.9元.小明买了若干啤酒和饮料,一共花了s元. 我们 ...

  8. codeforces round #428 div2

    A:暴力模拟,能加就加,如果累计到了8就加上,每次累积 #include<bits/stdc++.h> using namespace std; int main() { ; scanf( ...

  9. 33. Extjs中的tree节点的操作

      转自:https://blog.csdn.net/masterShaw/article/details/51354351?utm_source=blogkpcl9 ext 树节点操作   tree ...

  10. FastDFS的介绍

    FastDFS的介绍 FastDFS FastDFS是由国人余庆所开发,其项目地址: https://github.com/happyfish100 FastDFS是一个轻量级的开源分布式文件系统,主 ...