介绍一种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=" ...
随机推荐
- 20款优秀的国外 Mobile App 界面设计案例
在下面给大家分享的移动应用程序界面设计作品中,你可以看到不同创意类型的视觉效果.如果你想获得灵感,那很有必要看看下面20个优秀用户体验的移动应用 UI 设计.想要获取更多的灵感,可以访问移动开发分类, ...
- 开放产品开发(OPD):Archi 汉化工具下载
本文更新版本已挪至 http://www.zhoujingen.cn/blog/3378.html ------------------------------ 在OPD中,我们使用了ArchiMa ...
- Windows Azure Web Site (17) 设置Web App TimeOut时间
<Windows Azure Platform 系列文章目录> 我们在开发Azure Web App的时候,如果页面加载时间过长,可能需要设置Time Out时间. 在这里笔者简单介绍一下 ...
- webapp开发之需要知道的css细节
引言 首先说明一下,本文分享对象是涉世未深的移动开发者,至于有经验的开发者可以自行绕道. 说来惭愧,做了几年pc端的前端开发,很少接触到webapp的移动端开发.如今有机会参与webapp的开发,发现 ...
- Mysql创建用户的三种基本方法
1.采用create user e.g. create user 'username'@'host' identified by 'password'; 2.采用grant语句 e.g. gran ...
- 点餐APP 冲刺一总结
在冲刺一的过程中,我们小组每个人的任务相对来说都比较轻松,完成的进度也比较快, 主要的原因是每个人分配的任务都比较明确,大家也很积极地去完成.当然啦,我们在实现 项目的过程中也遇到了一些麻烦,主要是最 ...
- [水煮 ASP.NET Web API2 方法论](3-4)设置路由可选项
问题 怎么样创建一个路由,不管客户端传不传这个参数,都可以被成功匹配. 解决方案 ASP.NET WEB API 的集中式路由和属性路由都支持路由声明可选参数. 在用集中式路由中可以通过 RouteP ...
- C++隐藏规则
在面向对象的开发过程中,经常出现类的继承,这里面出现的成员函数的重载(overload).覆盖(override)与隐藏(hidden)很容易混淆. 首先澄清这3个概念: 重载 相同的范围(在同一个类 ...
- 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup
[源码下载] 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup 作者:webabcd 介绍重新想象 Wind ...
- 启动Eclipse 弹出"Failed to load the JNI shared library jvm.dll"错误
启动Eclipse 弹出"Failed to load the JNI shared library jvm.dll"错误,如下 原因:eclipse的版本与jre或者jdk版本不 ...