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. 安装Windows2003操作系统 - 初学者系列 - 学习者系列文章

    Windows 2003是一款经典的服务器操作系统.以前笔者工作的时候就是用的这款操作系统来进行编程的.下面就对该操作系统的安装进行介绍(部分步骤参见XP的安装http://www.cnblogs.c ...

  2. 安装SQL Server 2005 - 初学者系列 - 学习者系列文章

    初学者阶段,建议从数据库为基础入手进行学习. 下面介绍微软的SQL Server 2005数据库的安装. 首先,从下列地址获取SQL Server 2005的安装程序. ed2k://|file|cs ...

  3. Mysql 使用CMD 登陆

    1. 将mysql 的bin 目录加到 系统环境变量中: 这样的目的是为了可以直接在cmd中使用mysql命令,而不用先CD到mysql的bin目录中. 3. 连接目标数据库 . Syntax:   ...

  4. SSMS2008插件开发(2)--Microsoft Visual Studio 2008插件开发介绍

    原文:SSMS2008插件开发(2)--Microsoft Visual Studio 2008插件开发介绍 由于开发SSMS2008插件是通过VS2008进行的,有必要先介绍一下VS2008的插件开 ...

  5. effective java读书小记（一）创建和销毁对象

    序言 <effective java>可谓是java学习者心中的一本绝对不能不拜读的好书,她对于目标读者(有一点编程基础和开发经验)的人来说,由浅入深,言简意赅.每一章节都分为若干的条目, ...

  6. jsonp跨域+ashx

    jsonp跨域+ashx(示例) 前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件 ...

  7. Step one : 熟悉Unix/Linux Shell 常见命令行 (三)

    3.学会使用一些管理命令 ps/top/lsof/netstat/kill/tcpdump/iptables/dd 端口查看 ps -- process status ps aux  观察程序所有程序 ...

  8. 监听JVM关闭

    使用Runtime的addShutdownHook(thread)方法: for(int i=0; i<5; i++){ System.out.println(i); } Thread th = ...

  9. Controller 和 Action (2)

    Controller 和 Action (2) 继上一篇文章之后,本文将介绍 Controller 和 Action 的一些较高级特性,包括 Controller Factory.Action Inv ...

  10. CoreSeek Sphinx 安装

    1.centos Sphinx 先安装 yum install postgresql-libs yum install unixODBC CoreSeek 安装: http://www.coresee ...