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. 引入HBase依赖包带来的麻烦

    在一个项目里用到HBase做底层存储,使用maven来管理相关Jar包依赖,用maven来管理依赖包,特别不爽的就是他会将你引入Jar包自己的依赖都搞进来,经常会出现一些类和方法冲突找不到等状况.这次 ...

  2. php 反射

    一.通过{属性名} 对对象赋值.        $book=new Book();        $propertyName="name";        $propertyVal ...

  3. Can't get WebApplicationContext object from ContextRegistry.GetContext(): Resource handler for the 'web' protocol is not defined

    I'm stucked in configuring my web.config file under a web forms project in order to get an instance ...

  4. Asp.net mvc 各个组件的分离

    1. 系统常见的分层 在开发asp.net mvc应用的时候,visual studio 给我们创建了默认的文档结构,一般情况下我们在一个项目下工作,参考微软的官方例子:ContosoUniversi ...

  5. 同程旅游网开放平台SDK开发完成

    最近利用业余时间,使用了同程旅游网的开放平台,并对大部分的方法进行了调用,发现有很多不好用的地方,比如 1.同一个开放平台居然有几个调用地址,景区调用http://tcopenapi.17usoft. ...

  6. 简谈ubuntu之DIY发行版

    2007.05.13    二十一世纪到了,每个人都强调自己的个性,于是一种叫做DIY的东西悄然兴起. 操作系统作为全人类智慧的结晶,自然DIY起来难度极大,因而DIY出一个操作系统成就感绝对比买宜家 ...

  7. iOS-Debug

    1.打印该段代码在哪个类中哪个方法中执行的. NSLog(@"%s",__FUNCTION__); 2.Debug 方法 #define YYLogDebug(fmt, ...) ...

  8. 链表中倒数第k个结点

    题目: 输入一个链表,输出该链表中倒数第k个结点. 思路: 因为是单向链表,如果使用最普通的遍历来解决的话会多出很多不必要的遍历.有一个比较好的解法,设置两个指针两个指针之间差k-1个位置,也就是当后 ...

  9. js-基础（1）

    js-基础(1) javascript由三部分组成:核心,DOM,BOM核心——ECMAScript,可以运行浏览器/单纯的JS引擎    console.log(‘hello’);DOM——操作HT ...

  10. 如何单独启动wamp 中自带的MySQL

    前言:Wamp集成了Apache.MySQL和PHP环境.使用Wamp进行网站开发,是很多网站开发爱好者的选择.同时,其集成的MySQL服务,也常被用于MySQL的开发.这个时候我们只是想启动MySQ ...