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. Spring boot教程

    1.首先是新建Maven工程 2.引入Pom依赖 3.新建一个Controller 4.运行Main方法 5.浏览器访问 pom.xml <project xmlns="http:// ...

  2. QGraphics

    QGraphicsView和QGraphicsScene QGraphicsScene提供一个场景,可以添加各种item,QGraphicsView用于将元素显示,并支持旋转和缩放:可以将QGraph ...

  3. JAVA敏捷开发环境搭建（转载）

    前面介绍了创业型软件公司的工作模式,这里详细介绍下如何实施,第一步是先要搭建环境,有了环境才能开展工作. 整个软件项目分为四个环境 开发本地环境.开发环境.测试环境.IDC环境.和传统C++开发不一样 ...

  4. 扫描二维码跳转app

    1.判断是否安装了app <html> <head> <meta name="viewport" content="width=device ...

  5. HDOJ 2079 选课时间(母函数)

    选课时间(题目已修改,注意读题) Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. php弱类型

    此处写ctf中遇到的==和md5值为0e**的应用. 数组和字符的===   ==

  7. CentOS 6下安装nginx

    原文:http://yubosun.akhtm.com/tech/centos-nginx.htm 1 在nginx官方网站下载一个rpm包,下载地址是:http://nginx.org/en/dow ...

  8. 关于c语言中的字符数组和字符串指针

    先看代码: #include <stdio.h> int main(void) { ] = "; char * strTmp = "abcdefg"; int ...

  9. php接收数据

    http://lpladdyy.blog.163.com/blog/static/133999664201010264264585/ PHP默认只识别application/x-www.form-ur ...

  10. POJ 1607

    #include<iostream> #include<iomanip> using namespace std; int main() { //freopen("a ...