介绍一种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=" ...
随机推荐
- Hadoop第11周练习—HBase基础知识
1 :数据即日志 内容 2 :HBase合并过程 内容 3 :HBase一致性 内容 书面作业1:数据即日志 内容 我们常说HBase是“数据即日志”的数据库,它是怎样修改和删除数据的?和Oracle ...
- Tools - RSS
RSS RSS是在线共享和阅读内容的一种方式,能够简洁高效地获取订阅内容的更新. 全称Really Simple Syndication (真正简易联合),也叫聚合内容. 有选择地浏览感兴趣的以及与工 ...
- 资料下载:敏捷个人的成长思考.pptx(第1次线下活动2011.04)
本文挪至 http://www.zhoujingen.cn/blog/629.html PDF下载地址:http://down.51cto.com/data/207112 推荐:你可能需要的在线电子书 ...
- Android学习笔记之Json的使用....
PS:当你的能力还驾驭不了你的目标时,那你需要沉下心来历练... 学习内容: 1.Json的使用... 2.Json信息过滤... 3.从网络上获取Json数据... 4.解析Json数据获取各个属性 ...
- SQL Server 2005 Service Broker
一.引言 SQL Server 2005 的一个主要成就是可以实现可靠.可扩展且功能完善的数据库应用程序.与 .NET Framework 2.0 公共语言运行库 (CLR) 的集成使开发人员可以将重 ...
- mysql如何更改数据库名(一键实现mysql改数据库名)
由于某种原因,有时我们有可能需要数据库的名称,但是不像官方有rename可以去更改表名,并没有一个命令可以去更新数据库的名字. 思路:借助rename这个命令 基本操作:rename olddb.ta ...
- Spring基础—— 泛型依赖注入
一.为了更加快捷的开发,为了更少的配置,特别是针对 Web 环境的开发,从 Spring 4.0 之后,Spring 引入了 泛型依赖注入. 二.泛型依赖注入:子类之间的依赖关系由其父类泛型以及父类之 ...
- Scrum团队成立3.0
博客园 首页 新随笔 联系 订阅 管理 随笔 - 23 文章 - 0 评论 - 26 0428-Scrum团队成立3.0 ------------------------------3.0---- ...
- maven工程导入时解决Cannot change version of project facet Dynamic Web Module to 2.3
解决方法:修改web.xml,在头部加入内容,加入后为: <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance&q ...
- 成熟的RosettaNet解决方案软件介绍
RosettaNet是一套B2B标准,以标准来优化供应链管理流程,它可以缩短整个供应链各个供货周期.RosettaNet 标准为电子商务标准化提供一个健壮的.非专有的解决方案,它是免费的,通过 Ros ...