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. tengine-2.1.0 + GraphicsMagick-1.3.20

    export LUAJIT_LIB=/usr/local/libexport LUAJIT_INC=/usr/local/include/luajit-2.0/./configure --prefix ...

  2. SQL截取字段字符串的方法

    set @str='WX15-53-H-53-99-15-335-23'; select @str as '字符串' select len(@str) as '字符长度' select charind ...

  3. udp穿透简单讲解和实现(Java)

    在上一小节中了解到了通过浏览器自带的Webrtc功能来实现P2P视频聊天.在HTML5还没有普及和制定Webrtc标准的前提下,如果要在手机里进行视频实时对话等包括其他功能的话,还是要自己实现,还比较 ...

  4. 超实用的JavaScript技巧及最佳实践（下）

    1.使用逻辑符号&&或者||进行条件判断 1 2 3 var foo = 10;  foo == 10 && doSomething(); // is the same ...

  5. MyBatis知多少（3）

    解决存储过程固有限制的方法之一就是将SQL嵌入到更加通用的语言中去.与存储过程将业务逻辑移入数据库相反,内联SQL将SQL从数据库移入了应用程序代码.这就使得SQL语句可以直接与语言进行交互.从某种意 ...

  6. 疯狂的ASP.NET系列-第一篇：啥是ASP.NET

    最近想学下ASP.NET,于是在网店上看到一本书叫做ASP.NET高级程序设计,老婆在旁边问了句:“这个不是DSP(数字信号处理,大学读的电子,所以这个比较熟),是ASP啊,什么是ASP啊?”.我想了 ...

  7. LoRaWAN移植笔记(一)__RTC闹钟链表的实现

    近日在阅读semtech的Lora-net/LoRaMac-node.此代码是LoRaWAN MAC层的node段的代码. 此代码中构建了一个定时器链表,此链表构建得非常的巧妙,现在和大家分享. 此定 ...

  8. Rainyday.js – 傻眼了！竟然有如此逼真的雨滴效果

    Rainyday.js 是一个轻量的 JavaScript 库,利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果.Rainyday.js 尽可能的模拟现实的雨滴效果,几乎可以以假乱真了 ...

  9. ASP.NET 让无码编程不在是梦 -.NET通用平台、通用权限、易扩展、多语言、多平台架构框架

    先拿出我半前年前平台的设计初稿,经过半年的努力我已经完成了该设计稿的所有功能.并且理念已经远远超出该设计稿. 下面是一些博友对我贴子的评价: 1.楼主,想法很美好,现实很骨感,我们公司就有一套你说的这 ...

  10. 【Win10】页面导航的实现

    注:本文基于 Windows 10 10240 及其 SDK 编写,若以后有变化,请以新版本为准. 页面导航我们是再熟悉不过了,浏览器.手机 App 大多都使用这种方式来展示内容.在 Windows ...