这次介绍一下一个水平垂直居中的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. Android学习笔记之SoftReference软引用...

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

  2. dock基本使用

    通过Docker源安装最新版本通过Docker源安装最新版本 要安装最新的 Docker 版本,首先需要安装 apt-transport-https 支持,之后通过添加源来安装.要安装最新的 Dock ...

  3. 查找表或其他对象在某个Server上的存在

    EXEC sp_MSforeachdb 'use ? ;  IF EXISTS(SELECT top 1 1 FROM sys.syscomments WHERE text LIKE ''%test% ...

  4. 6/20 sprint3 看板和燃尽图的更新

  5. 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想

    总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...

  6. MySQL数据库 安装图解

    下面的是MySQL安装的图解,用的可执行文件:下载地址:http://www.jinhusns.com/Products/Download/?type=xcj相关下载 mysql安装向导启动,按“Ne ...

  7. 【JS复习笔记】07 复习感想

    好吧,其实<JavaScript语言精粹>后面还简单介绍了代码风格,优美特性,以及包含的毒瘤.糟粕. 但我很快就看完了,发现其实都在前面讲过了,所以就不写了. 至今为止已经算是把JavaS ...

  8. Servlet-中文乱码

    背景 从Tomcat5.x开始,GET,POST方法提交信息,Tomcat采用不同的方式来处理编码. 对于GET请求,Tomcat不会考虑使用request.setCharacterEncoding( ...

  9. yii2时间日期控件的使用[转]

    注:原文http://www.manks.top/yii2-datetimepicker.html 有更改 1.安装 进入到项目文件中D:\phpStudy\WWW\yii2blog    使用cmd ...

  10. Linux服务器时间同步方法

    一般稍微大点的项目都会部署到好几台服务器做集群,同一个应用可能部署到几台服务器上,而处理业务中必须让不同的服务器上时间保持一致,这就需要进行服务器间的时间同步.我的做法是: 1,选择其中一台对外网开放 ...