介绍一种css水平垂直居中的方法(非常好用!)
这次介绍一下一个水平垂直居中的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水平垂直居中的方法(非常好用!)的更多相关文章
- CSS水平垂直居中的方法
原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- css水平垂直居中的方法与 vertical-align 的用法
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 ...
- css 水平垂直居中的方法总结
在项目中经常会遇到设置元素水平垂直居中的需求.而且具体的场景也不同,所以将个人总结的方法做个汇总,希望对浏览者有用. 以下所举的例子都以一个html为准,这里规定好一些公用样式. body { bac ...
- CSS水平垂直居中常见方法总结
1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区 ...
- CSS水平垂直居中常见方法总结2
1.文本水平居中line-height,text-align:center(文字)元素水平居中 margin:0 auo 方案1:position 元素已知宽度 父元素设置为:position: re ...
- [css]水平垂直居中的方法
1.top:cale(50% - 2rem); left:cale(50% - 2rem);
- 53.CSS---CSS水平垂直居中常见方法总结
CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...
- 05. flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中)
flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...
随机推荐
- [数据库]sql之行顺序
这个文章主要是防止我忘了sql的执行顺序,解释的东西我都没怎么看懂.数据库渣如我- 逻辑查询处理阶段简介 FROM:对FROM子句中的前两个表执行笛卡尔积(Cartesian product)(交叉联 ...
- suricata学习笔记1--初步认识
1.前言 最近工作需要对网站的关键字进行检测,找出敏感词.这个过程需要对报文进行收集.解码.检测和记录日志.当前只是简单实现功能,根据关键字进行简单的匹配,而没有进行关键字的语义分析.导致的结果就是 ...
- 关于SQL SERVER高并发解决方案
现在大家都比较关心的问题就是在多用户高并发的情况下,如何开发系统,这对我们程序员来说,确实是值得研究,最近找工作面试时也经常被问到,其实我早有去关心和了解这类问题,但一直没有总结一下,导致面试时无法很 ...
- springMVC源码分析之拦截器
一个东西用久了,自然就会从仅使用的层面上升到探究其原理的层面,在javaweb中springmvc更是如此,越是优秀的框架,其底层实现代码更是复杂,而在我看来,一个优秀程序猿就相当于一名武林高手,不断 ...
- Spring基础——一个简单的例子
一.学习版本 spring-framework-4.0.0 二.导入 jar 包: 三.在类路径下创建 Spring Config 文件:ApplicationContext.xml <?xml ...
- 第一个sprint心得及感想
经过两个星期的努力,第一个周期的任务终于完成,通过这次团队协作,学到了很多东西,首先是把任务细分化,把大的任务分为每天完成,然后团队个人都有自己的任务份额,这样子就不会全压在一个人身上.还有就是学会了 ...
- OpenProcess打开进程返回错误的问题
问题描述 项目中需要做一个小功能:能够查看系统中当前正在运行的进程的内存信息,如内存块类型.分配状态.访问权限等.如下图所示: 需要的信息和上图相差无几.说起来也不算太难,毕竟现成的API已经提供了. ...
- 用Qt写软件系列一:QCacheViewer(浏览器缓存查看器)
介绍 Cache技术广泛应用于计算机行业的软硬件领域.该技术既是人们对新技术探讨的结果,也是对当前软硬件计算能力的一种妥协.在浏览器中使用cache技术,可以大幅度提高web页面的响应速度,降低数据传 ...
- MVC增删查改,从数据库到后台,到前端,整个复习一下
就当是记笔记吧,这里,就不讲什么版式了,首先上数据库脚本,这个是我这次练习用到的数据库脚本: USE [DB_USERS] GO /****** Object: Table [dbo].[Studen ...
- 自学silverlight 5.0
这是一个silverlight游戏:http://keleyi.com/keleyi/phtml/silverlight/ 接了个单子,非要用Silverlight 5来作一个项目,之前从来没接触过这 ...