1. 多个子元素水平并排，IE10以下失效

 display: flex;
 align-items: center;
 justify-content: center;

2.多个子元素竖直排列，这种方式会导致margin失效，IE8以下失效

 display: table-cell;
 vertical-align: middle;

　　

　　

[CSS] 子元素垂直居中的两种方式的更多相关文章

  1. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  2. 简单说 通过CSS实现 文字渐变色 的两种方式

    说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> <ht ...

  3. 【前端】使用CSS使元素居中的几种方式

    Precondition: <div class="parent"> <div class="item">居中</div> ...

  4. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  5. 通过CSS实现 文字渐变色 的两种方式

    说明 这次的重点就在于两个属性, background 属性 mask 属性这两个属性分别是两种实现方式的关键. 方式一 解释 <!DOCTYPE html> <html> & ...

  6. css实现水平垂直居中的几种方式

    梳理下平时常用css水平垂直居中方式- 使用flex布局 HTML <div class="box"> <div class="child"& ...

  7. vue之provide和inject跨组件传递属性值失败（父组件向子组件传值的两种方式）

    简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...

  8. 【CSS】瀑布流布局的两种方式：传统多列浮动和绝对定位布局

    传统多列浮动 各列固定宽度,并且左浮动: 一列中的数据块为一组,列中的每个数据块依次排列即可: 更多数据加载时,需要分别插入到不同的列上: 优点: (1)布局简单,应该说没啥特别的难点: (2)不用明 ...

  9. css一个元素垂直居中的6种方法

    方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. C#中float的取值范围和精度

    原文:C#中float的取值范围和精度 float类型的表现形式: 默认情况下,赋值运算符右侧的实数被视为 double. 因此,应使用后缀 f 或 F 初始化浮点型变量,如以下示例中所示: floa ...

  2. Libgdx Box2D现实---这缓释微丸（两：Box2D介绍）

     Box2D官方网站 : http://box2d.org/ Box2D v2.1.0用户手冊翻译 : http://blog.csdn.net/complex_ok/article/catego ...

  3. 简单分析android textview xml 的属性设置

    android:ems 设置TextView的宽度为N个字符的宽度. 这样的好处就是,在定义编辑框空间输入多少字符的时候,可以根据固定的值设置编辑框宽度.保证边框和文字的宽度统一.android:ma ...

  4. 代码审查 (Google牛人谈Code Review)

    代码审查 (Google牛人谈Code Review) 在上一篇博客里我暗示自己将不在为Google工作. 我还没有决定好去哪儿-有几个非常不错的工作机会让我选择.鉴于这段时间内我不受雇于任何公司,我 ...

  5. Qt的SQL操作，DELETE，SELECT

    #include <QObject> #include <QSqlDatabase> #include <QSqlError> #include <QSqlQ ...

  6. Oracle琐碎笔记2

    备注:以下所有操作均在sqlplus中执行. 开始前输入:spool c:\jiyi.txt;结束后输入:spool off;就会记忆操作的所有记录save c:\sql.sql;保存sql脚本可以使 ...

  7. js理解

    js-提前声明和new操作符理解   1.提前声明:声明变量后,js会把声明部分提前到作用域前面. var a=1; function aheadOfStatement(){ alert(a); va ...

  8. [置顶] 如何使用c3p0+spring连接oracle数据库

    1. 首先是jdbc.properties属性文件的编写,便于数据库移植: datasource.driverClassName=oracle.jdbc.driver.OracleDriver dat ...

  9. Printk 标志优先级别

    #define KERN_EMERG                  "<0>"       /* 致命级:紧急事件消息,系统崩溃之前提示,表示系统不可用   */# ...

  10. 关于HTTP头标

    对于HTTP中的头字段,我表示真的好麻烦,特找来一段资料共享.希望能对大家有用. HTTP的头域包括通用头,请求头,响应头和实体头四个部分.每个头域由一个域名,冒号(:)和域值三部分组成.域名是大小写 ...