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. 关于knob.js进度插件的使用

    关于这个插件,妹的,第一次使用坑死爹了,各种不会,幸亏我有持之以恒的精神,最终还是让其臣服于我的胯下.... 1.  引入 head  部分添加knob.js,同时引入excanvas.js这个文件主 ...

  2. 安装WindowsXP操作系统（安装版） - 初学者系列 - 学习者系列文章

    本文主要介绍下Windows XP操作系统的安装. 1.             将光驱装入光驱.启动电脑,在开始界面按下DEL键,进入BIOS设置界面.将光驱设置为第一启动项.下面以虚拟机为例子. ...

  3. EnterpriseLibrary 6.0(微软企业库6.0学习笔记) 之Data Access Block 配置和获取链接字符串

    EnterpriseLibrary 的特点是快速开发,融合了微软工程师多年的经验,现在在微软内部有专门的一个小组在完善EnterpriseLibray,最近的更新时间是April 2013. 相关链接 ...

  4. 开源框架之TAB控件

    我的开源框架之TAB控件   需求 (1)支持iframe.html.json格式的tab内容远程请求 (2)支持动态添加tab (3)支持远程加载完成监听,支持tab激活事件监听 (4)支持relo ...

  5. SOA、ESB、NServiceBus、云计算

    SOA.ESB.NServiceBus.云计算 总结 SOA SOA 是通过功能组件化.服务化,来实现系统集成.解决信息孤岛,这是其主要目标.而更进一步则是实现更快响应业务的变化.更快推出新的应用系统 ...

  6. Visual Studio 2013 IIS Explorer 停止调试继续访问站点

    升级到2013后,在做调试的时候默认调试服务器是 IIS Explorer,当终止调试的时候再次访问调试站点时已经无法访问了.此时想预览一下感觉很不方便. 为了能够预览可以参考一下配置: Tools  ...

  7. Extension Objects（扩展对象）

    设计模式之美:Extension Objects(扩展对象)   索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):使用示例结构实现 Extension Objects. 实现方 ...

  8. C#打包应用程序

    摘要:本文介绍在C#中手把手教你用C#打包应用程序(安装程序卸载程序) 1:新建安装部署项目 打开VS,点击新建项目,选择:其他项目类型->安装与部署->安装向导(安装项目也一样),然后点 ...

  9. Stub和Mock的理解

    我对Stub和Mock的理解 介绍 使用测试驱动开发大半年了,我还是对Stub和Mock的认识比较模糊,没有进行系统整理. 今天查阅了相关资料,觉得写得很不错,所以我试图在博文中对资料进行整理一下,再 ...

  10. Android开发效率的小技巧

    提高eclipse使用效率(二) 提高Android开发效率的小技巧   XML文件的代码提示 adt中也有xml文件的代码提示,为了让提示来的更加猛烈,我们还要设置一下 打开eclipse - Wi ...