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. Ubuntu12.04环境搭建遇到的问题和建议（一个）

    后的新公司需要在Ubuntu12.04在结构Android开发环境,在这个过程中,我们还是会遇到很多问题,这里记录.为了方便自己的未来,有人谁需要参考.从网络! 1. Q:在终端: sudo apt- ...

  2. 学习PHP时的一些总结（四）

    目录的基本操作: 在系统的每个目录下都有两个特殊的目录"."和".." , 分别指示当前目录和当前目录的父目录. dirname()  返回目录的名称 path ...

  3. 如何用CSC.exe来编译Visual C#的代码文件

    原文:如何用CSC.exe来编译Visual C#的代码文件 C#的编译过程      如何用CSC.exe来编译Visual C#的代码文件   Csc.exe 编译器的位置路径:C:\Window ...

  4. px/em/pt区别和转换

    老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的“95%的中国网 ...

  5. PBKDF2WithHmacSHA1算法

    主要用于明文密码加密字符串存入数据库.由棱镜门思考.目前大部分企业中都是明文密码.一旦被攻破.危害非常大.现在主流加密技术是MD5加密.不过MD5的存在小概率碰撞(根据密码学的定义,如果内容不同的明文 ...

  6. Linq无聊练习系列5--OrderBy ，Groupby练习

    /**************OrderBy ,Groupby练习*******************/                       //按学生的总分数按降序排列排序         ...

  7. AngularJS的工作原理

    AngularJS的工作原理 个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些 ...

  8. c# 发送Email的2中方式

    先来第一种 // 版权所有 ZhuoYue Co.,Ltd 卓越一通秘密信息 // 文件名称:MyEmailByCDO.cs // 作 者:huangzh // 创建日期:2015-08-20 16: ...

  9. 百度云语音识别，Audio2Txt（c#）

    百度云识别没有提供c#版本的sdk,下面给个c#的 1.打开网址http://developer.baidu.com/ 2.登陆 3.管理控制台>开发者服务管理 4.创建工程 5.输入名称,点击 ...

  10. [转]OPENSOLARIS 2009.06 REPOSITORY ISO IMAGES NOW AVAILABLE

    Source: http://hosam.wordpress.com/2009/07/25/opensolaris-2009-06-repository-iso-images-now-availabl ...