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种写法的更多相关文章

  1. DIV居中显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 设置div中的div居中显示

    设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...

  3. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

  4. 多个div居中显示

    页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...

  5. div最小高度的2种写法

    1.第一种写法: 原理:在IE6中,使用CSS定义div的高度的时候经常遇到这个问题,就是当div的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,div的高度会固定在一个值不再发生变动, ...

  6. 不固定宽度的div居中显示

    对于div的居中 ,如果是有固定宽高的,可以加margin:auto;水平垂直居中,但如果是不固定宽高,又想让div居中的话,这种方式都可能不奏效,达不到想要的效果. 有两种方法:1.加display ...

  7. CSS——盒子居中显示

    嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...

  8. CSS文本居中显示

    因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...

  9. css div 清理浮动的2种方法

    使用float属性,导致div的内容发生浮动,浮动带来负影响: 1.背景不能显示 2.边框撑不开 3.div的padding和margin不能起作用: 处理float浮动的两种方式: 1.div的子类 ...

随机推荐

  1. shell编程之重定向

    标准输入,输出和错误---------------------------------文件文件                描述符---------------------------------输 ...

  2. 【BZOJ】【2245】【SDOI2011】工作安排

    网络流/费用流 裸题吧……直接建模就好了……所谓的“分段函数”就是吓唬你的,其实就是对于每个人分开建几条流量不同.费用不同的弧而已. 对每种产品,连S->i ,(c[i],0):对每个工作人员 ...

  3. 2013ACM/ICPC亚洲区南京站现场赛——题目重现

    GPA http://acm.hdu.edu.cn/showproblem.php?pid=4802 签到题,输入两个表,注意细心点就行了. #include<cstdio> #inclu ...

  4. 响应式嵌入 iframe Pym.js

    Pym.js 可以让你在嵌入 iframe 的时候可自动的对 iframe 的大小进行调整以适应父一层容器,并且可以避免跨域问题. 支持浏览器: Internet Explorer 9, 10 (Wi ...

  5. android中PreferenceScreen类的用法

    PreferenceScreen preference是偏好,首选的意思,PreferenceScreen个人翻译成 “偏好显示”,明白这个意思就好,就是说根据特点灵活的定义显示内容风格,一个屏幕可以 ...

  6. json 处理

    //String sssssString = "{"response":{"data":[{"address":"南京市 ...

  7. （转载）李剑英的CSLight入门指南结合NGUI热更新

    原地址:http://www.xuanyusong.com/archives/3075 李剑英的CSLight入门指南文档撰写者:GraphicQQ: 1065147807 一． CSLIGHT 作者 ...

  8. vi/vim使用指北 ---- Beyond the Basic

    更多的组合命令 [number]-[command]-[test object] number:   数字 comand:  c,d,y  (修改,删除,复制) test object: 移动光标的命 ...

  9. uva 10564

    Problem FPaths through the HourglassInput: Standard Input Output: Standard Output Time Limit: 2 Seco ...

  10. POJ 3685

    Matrix Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 4428   Accepted: 1102 Descriptio ...