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. 控制UIlabel 垂直方向对齐方式的 方法

    最正统的方法,利用objective-c的category特性,修改UILabel的绘制代码.示例代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...

  2. ASP.NET制作一个简单的等待窗口

    前一阵做一个项目,在处理报表的时候时间偏长,客户提出要做出一个等待窗口提示用户等待(页面太久没反映,用户还以为死了呢).在分析这一需求之后,觉得如果要实现像winform应用中的processbar太 ...

  3. HTTP报头详解

    HTTP头字段包括4类:      general-header ; 通用报头      request-header ; 请求报头      response-header ; 响应报头      ...

  4. PHP几个函数

    pack: 数据装入一个二进制字符串 http_build_query: 将数组转化成URL GET参数的形式. get_class:返回对象的类名,注:即使是在父类方法中调用也是返回子类的类名. g ...

  5. Java 8怎么了：局部套用vs闭包

    [编者按]本文作者为专注于自然语言处理多年的 Pierre-Yves Saumont,Pierre-Yves 著有30多本主讲 Java 软件开发的书籍,自2008开始供职于 Alcatel-Luce ...

  6. Java script 看看黑客怎么写的

    在2011年的BlackHat DC 2011大会上Ryan Barnett给出了一段关于XSS的示例java script 代码: ($=[$=[ ] ] [(__=!$+$)[_=-~-~-~$] ...

  7. POJ 1491

    #include<iostream> #include<cmath> #include<iomanip> #define MAXN 50 using namespa ...

  8. 2014多校第十场1002 || HDU 4972 A simple dynamic programming problem

    题目链接 题意 : 每次无论哪个队投进一个篮球,就记下现在两队比分的差值,问你最后的结果有多少种情况. 思路 : 该题实在是不好理解,最后的结果有多少种情况就是说不管中间过程怎么来的,只要最后结果不一 ...

  9. Android View体系

  10. 有用的一些web网站

    1.http://www.aseoe.com/api-download/download.html 爱思资源网