1,设置其line-height值，使之与其高度相同

2,设置table结构，用vertical-align:middle;

3,应用定位,父级别：position：relative；子级：position:absolute; top:50%;margin-top:-自身高度的一半；

4,display:flex;一种弹性布局，兼容性不太好

5,css3的translate属性

css实现垂直居中的方法的更多相关文章

  1. 转: css实现垂直居中的方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...

  2. CSS中垂直居中的方法

    昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...

  3. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  4. 介绍一种css水平垂直居中的方法（非常好用！）

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  5. css水平垂直居中的方法与 vertical-align 的用法

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 ...

  6. css实现垂直居中的方法整理

    1.表格布局法.(利用表格的显示模式)需要用到一些冗余的 HTML 元素,因此这里不多介绍. 2.行内块法.也不作讨论,因为在我看来这种方法 hack 的味道很浓. 如果你有兴趣,可以去看看 Chri ...

  7. css 水平垂直居中的方法总结

    在项目中经常会遇到设置元素水平垂直居中的需求.而且具体的场景也不同,所以将个人总结的方法做个汇总,希望对浏览者有用. 以下所举的例子都以一个html为准,这里规定好一些公用样式. body { bac ...

  8. CSS水平垂直居中常见方法总结

    1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区 ...

  9. CSS水平垂直居中常见方法总结2

    1.文本水平居中line-height,text-align:center(文字)元素水平居中 margin:0 auo 方案1:position 元素已知宽度 父元素设置为:position: re ...

  10. [css]水平垂直居中的方法

    1.top:cale(50% - 2rem); left:cale(50% - 2rem);

随机推荐

  1. mongo3.x ssl版安装文件

    搞c++好郁闷就是编译驱动.我都编疯了.虽然是按着教程走,但有时不同版本的机器有时各种奇奇原因莫妙奇妙编出问题.FQ出去啃英文解决的好吃力. 本来想更新一下项目的mongo从2.x 升级到3.x,然后 ...

  2. 十五、EnterpriseFrameWork框架核心类库之系统启动入口与初始化

    本章内容是讲三种开发模式,web模式.Winform模式和Wcf模式的系统启动入口有什么区别,以及启动后系统初始化的内容:为什么要把这些单独提出来讲一章,因为我觉得本章非常重要,我们都知道程序中的ma ...

  3. 类或方法名后加<>

    声明类型为泛型. 说明传递的参数为泛型,而不仅仅是一种类型. public void aa<T>(T a) { Console.WriteLine(a); } 调用时可写: this.aa ...

  4. JSON数据行转列的应用

    背景 先说说为什么要弄什么行转列. 时间 类别 费用 2014-07-08 电费 120 2014-07-08      水费 23 2014-07-09 电费 44 2014-07-09 水费 77 ...

  5. js中的包装对象。

    我们都知道在js中普通类型的变量是没有属性和方法的,然后有时却并不是这样. var str = "努力,奋斗"; console.log(str.length); var num ...

  6. Android学习笔记之SoftReference软引用...

    PS:其实这一篇和上一篇很类似,都是为了解决内存不足(OOM)这种情况的发生... 学习内容: 1.对象的引用类....   最近也是通过项目中知道了一些东西,涉及到了对象的引用类,对象的引用类分为多 ...

  7. Mysql学习笔记（十四）备份与恢复

    学习内容: 1.数据库的重要数据备份... 2.什么时候需要使用到数据库备份.. 3.如何恢复备份的数据.. 1.备份: 说到备份,相比大家都不应该陌生,比如说我们平时在为我们的电脑重新做系统的时候, ...

  8. 【第二课】深入理解Handler

    简要讲解Handler是做什么的 我们知道,在Android中,app启动会启动一个进程一个线程——UI线程,UI线程是主线程,并且不允许这个线程阻塞超过5秒,一旦超过5秒就会ANR. 所以较为耗时的 ...

  9. Tempdb的并发阻塞

    9.3 Tempdb的并发阻塞 在介绍Tempdb的并发问题前,先介绍几个比较特殊的数据页. PFS(Page Free Space),用于标识数据页空间的使用情况,以字节标识,可以表示数据页使用百分 ...

  10. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...