这次介绍一下一个水平垂直居中的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. Java后端书架

    本书架主要针对Java后端开发与架构. 更新记录:4.0版把第五部份-具体技术的书整块拿掉了.<TCP/IP详解 卷1:协议>出到了第二版,增加<SRE:Google运维解密> ...

  2. Hadoop第12周练习—HBase安装部署

    1  1.1 1.2 :安装HBase 2.1 内容 运行环境说明 1.1 硬软件环境 线程,主频2.2G,6G内存 l  虚拟软件:VMware® Workstation 9.0.0 build-8 ...

  3. lettuce webdriver 自动化测试---玩转BDD

    行为驱动开发(BDD),依然高大上的矗立在远方,很少被人问津,一方面是BDD的思想不太容易理解,别一方面BDD的资料并不多.中文的资料就更少了. 之前增写过一篇<python BDD 框架之le ...

  4. Android 学习笔记之Volley(七)实现Json数据加载和解析...

    学习内容: 1.使用Volley实现异步加载Json数据...   Volley的第二大请求就是通过发送请求异步实现Json数据信息的加载,加载Json数据有两种方式,一种是通过获取Json对象,然后 ...

  5. Android 学习笔记之Volley开源框架解析(三)

      学习内容: 1.CacheDispatcher缓存请求调度... 2.Cache缓存数据的保存... 3.DiskBasedCache基于磁盘的缓存类实现方式...   前面说到使用Volley发 ...

  6. Action接收页面传来的参数方法

    接收页面传来的参数方法 1.第一种:在action中设置相应的变量 在相应的action中设置与将要传进来的参数名相同的变量 eg: 页面传给后台两个参数 name=chance & age ...

  7. SQL Server里的自旋锁介绍

    在上一篇文章里我讨论了SQL Server里的闩锁.在文章的最后我给你简单介绍了下自旋锁(Spinlock).基于那个基础,今天我会继续讨论SQL Server中的自旋锁,还有给你展示下如何对它们进行 ...

  8. 【Android】记录反编译安卓程序步骤

    主要是为了分析一个 App 里面用到的接口,以后移植 UWP 用. 1.http://jd.benow.ca/ 下载 JD-GUI. 2.https://github.com/pxb1988/dex2 ...

  9. MySQL扩展功能 - 重复插入

    replace into为什么不好?先删除,后插曲,删除时会全表扫描吗? 参考来自MySQL官方网络的文档: http://dev.mysql.com/doc/refman/5.0/en/replac ...

  10. windbg sos加载相关

    使用windbg 加载sos.dll时,经常碰到报The call to LoadLibrary(C:\Windows\Microsoft.NET\Framework\v4.0.30319\sos.d ...