这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码:

html,body{

width:100%;

height:100%;

}

你需要居中的元素{

position: fixed;(absolute)
      left:50%;
      top:50%;
      -webkit-transform: translate(-50%,-50%);

}

他的父元素{

position: relative;

width:100%;

height:100%;

}

当然,你的父元素是需要一个高度的,不管是根据html和body的height:100%;还是具体的高度,这样子,你的元素不管怎么样都可以居中。根本不用去考虑margin或者padding或者float之类的属性,是不是很神奇!

介绍一种css水平垂直居中的方法(非常好用!)的更多相关文章

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

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

  2. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

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

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

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

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

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

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

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

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

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

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

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

    CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...

  9. 05. flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中)

    flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...

随机推荐

  1. 【转载】解决 Subversion 的 “svn: Can't convert string from 'UTF-8' to native encoding” 错误

    转载自:http://blog.csdn.net/shaohui/article/details/3996274 在google code 上创建了一个新的项目, 用Windows 下面的tortoi ...

  2. Teehan & Lax 发布 iOS 7 GUI PSD 模板,免费下载

    在 iOS 7 发布不久,Teehan & Lax 就发布了 iOS 7 GUI PSD 模板.该网站分享众多 PSD 模板素材,这些精美的 PSD 界面模板在制作界面原型非常有用,能够帮助设 ...

  3. [linux]删除目录下的一类文件

    find 目录 -name "*.类型" | xargs rm -f 通过find命令,查找指定目录下的某一类型的文件.并通过管道传递给xargs,执行后面的rm -f命令. 最终 ...

  4. Mysql学习笔记(十一)临时表+视图

    学习内容: 临时表和视图的基本操作... 临时表与视图的使用范围... 1.临时表   临时表:临时表,想必大家都知道这个概念的存在...但是我们什么时候应该使用到临时表呢?当一个数据库存在着大量的数 ...

  5. WebService基于SoapHeader实现安全认证

    本文仅提供通过设置SoapHeader来控制非法用户对WebService的调用,如果是WebService建议使用WSE3.0来保护Web服务,如果使用的是Viaual Studio 2008可以使 ...

  6. .NET框架面向对象分层的个人想理

    简单.层次清晰不要过度优化,接口这玩意儿就是个双刃剑,玩好了解藕,玩不好自找麻烦,好的代码永远都是傻瓜都能看懂的. 总结成以下几条: 公用层 代码公用并且与第三方DLL和业务逻辑无关的 独立出来 逻辑 ...

  7. SystemTap知识(二)

    Unbuntu安装systemtap: http://www.cnblogs.com/hdflzh/archive/2012/07/25/2608910.html 1 更新源到http://mirro ...

  8. ActiveMQ学习(二)——MQ的工作原理

    如图所示 首先来看本地通讯的情况,应用程序A和应用程序B运行于同一系统A,它们之间可以借助消息队列技术进行彼此的通讯:应用程序A向队列1发送一条信息,而当应用程序B需要时就可以得到该信息. 其次是远程 ...

  9. 【推荐】iOS集合视图的可重新排序的layout

    在实际项目中你或许会遇到在一个集合视图中移动一项到另外一个位置,那么此时我们需要对视图中的元素进行重新排序,今天推荐一个很好用的第三方类LXReorderableCollectionViewFlowL ...

  10. 安装DRBD的一些问题

    安装DRBD,建议用源代码包先生成rpm包来安装,不要用直接download的rpm包,有可能会用不了,因为这跟系统内核版本有关系,在2.6.33版本以前内核没有集成drbd,   A.先安装一些其它 ...