css div居中显示的4种写法
Demo:http://www.feman.cn/h5/center.html
.absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支持这种写法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>absolute居中定位</title>
<style>
*{margin:0;padding:0}
.absoluteCenter{ width:600px; height:400px;position:absolute; background: rgb(50,183,97); left:50%; top:50%; margin-left: -300px; margin-top: -200px; }
</style>
</head>
<body>
<div class="absoluteCenter">我是absolute居中定位</div>
</body>
</html>
.translate定位 这是css3 transform的属性 通过自身的偏移来定位 而且他有个极大的好处 不需要知道div的宽高度 就像js里的this self一样 可以将宽高度设为百分比 IE browser<IE9不支持 在移动端使用较好
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate居中定位</title>
<style>
*{margin:0;padding:0}
.translateCenter{ width: 40%; height: 20%; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background: #2d2d2d;}
</style>
</head>
<body>
<div class="translateCenter">我是translate居中定位</div>
</body>
</html>
.margin居中定位 不需要确定div的宽高度 让top,bottom,left,right都为0 再加个margin:auto 神来之笔 IE browser< IE 8不支持
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin居中定位</title>
<style>
*{margin:0;padding:0}
.marginCenter{ width:200px; height: 200px; position: absolute;left:0; top:0; right:0; bottom: 0; margin: auto; background: #f2056e;}
</style>
</head>
<body>
<div class="marginCenter">我是margin居中定位</div>
</body>
</html>
.fixed的居中定位 这个用的最多的可能就是导航条这块儿 让导航条居中显示不随页面滚动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fixed居中定位</title>
<style>
*{margin:0;padding:0}
.fixedCenter{max-width:980px; height:70px; position:fixed; margin:0 auto; left:0; right:0; background:rgb(67,163,244);}
</style>
</head>
<body>
<div class="fixedCenter">我是fixed居中定位</div>
</body>
</html>
css div居中显示的4种写法的更多相关文章
- DIV居中显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 设置div中的div居中显示
设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...
- 让几个横向排列的浮动子div居中显示的方法
div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...
- 多个div居中显示
页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...
- div最小高度的2种写法
1.第一种写法: 原理:在IE6中,使用CSS定义div的高度的时候经常遇到这个问题,就是当div的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,div的高度会固定在一个值不再发生变动, ...
- 不固定宽度的div居中显示
对于div的居中 ,如果是有固定宽高的,可以加margin:auto;水平垂直居中,但如果是不固定宽高,又想让div居中的话,这种方式都可能不奏效,达不到想要的效果. 有两种方法:1.加display ...
- CSS——盒子居中显示
嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...
- CSS文本居中显示
因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...
- css div 清理浮动的2种方法
使用float属性,导致div的内容发生浮动,浮动带来负影响: 1.背景不能显示 2.边框撑不开 3.div的padding和margin不能起作用: 处理float浮动的两种方式: 1.div的子类 ...
随机推荐
- bzoj 2956 数学展开,分段处理
首先对于答案 ΣΣ(n mod i)*(m mod j) i<>j 也就是Σ(n mod i)Σ(m mod j)-Σ(n mod i)(m mod i) 将mod展开,我们可以得到有fl ...
- ios UI实现技巧
statusBar 移动位置 NSString *key = [[NSString alloc] initWithData:[NSData dataWithBytes:(unsigned ] enco ...
- if in hlsl
seems that in HLSL_4, we can use if https://msdn.microsoft.com/en-us/library/bb313972(v=xnagamestudi ...
- PowerDesigner(一)-PowerDesigner概述(系统分析与建模)(转)
PowerDesigner概述 PowerDesigner是Sybase公司推出的一个集成了企业架构,UML(统一建模语言)和数据库的CASE(计算机辅助软件工程)工具.它不仅可以用于系统设计和开发的 ...
- Asp.net页面无刷新请求实现
Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...
- 深入JS第一天:原型和它的小伙伴们(一)
我在这里不说定义,找点问题,再解决问题. 一.原型 Q1:这样做输出的结果是什么? jQuery= String; jQuery.prototype.say = function () { alert ...
- Error Code: 1175 Mysql中更新或删除时报错(未带关键字条件)
SET SQL_SAFE_UPDATES = 0; SQL_SAFE_UPDATES = {0 | 1} 如果设置为0,则MySQL会放弃在WHERE子句或LIMIT子句中不使用关键字的UPDATE或 ...
- poj 3686
The Windy's Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 3791 Accepted: 1631 Descr ...
- POJ 1845 Sumdiv (求某个数的所有正因子的和)
题意: 求A^B的所有正因子的和,最后模9901的结果. 思路: 若对一个数n进行素数分解,n=p1^a1*p2^a2*p3^a3*...*pk^ak那么n的所有正因子之和sum=(1+p1+...+ ...
- WAMP error: Forbidden You don't have permission to access /{you_app_name} on this server
Forbidden You don't have permission to access /{you_app_name}on this server. 需要修改两处: wamp\bin\apache ...