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. openOffice将doc在线预览

    最近,有个项目要用到类似DOCIN的文档转换和阅读的功能,于是就开始找相关的资料,最后总结出2种解决办法,以下就来探讨下两种方法的各自实现. 第一种:通过FLASH PAPER来转换DOC文档直接生成 ...

  2. Nodejs Express 4.X 中文API 4--- Router篇

    相关阅读: Express 4.X API 翻译[一] --  Application篇 Express4.XApi 翻译[二] --  Request篇 Express4.XApi 翻译[三] -- ...

  3. sencha Touch 2.4 学习之 XTemplate模板

    XTemplate模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  4. register_globals

    register_globals参数为On的时候很危险 这里记录一下各版本register_globals的情况 PHP5.2版本register_globals默认为On PHP5.3 PHP5.3 ...

  5. Winform设置相关

    >>  Winform查找根目录 1) AppDomain.CurrentDomain.BaseDirectory 地址为: d:\MyProject\Bin\  Application. ...

  6. HDU 1869 六度分离

    六度分离 http://acm.hdu.edu.cn/showproblem.php?pid=1869 Problem Description 1967年,美国著名的社会学家斯坦利·米尔格兰姆提出了一 ...

  7. Codeforces Round #337 (Div. 2) A. Pasha and Stick 水题

    A. Pasha and Stick   Pasha has a wooden stick of some positive integer length n. He wants to perform ...

  8. The first day of HTML

    这是韩顺平老师的<轻松搞定网页设计(html.css.js)>,讲的还凑合,仅作入门.决定还是做好笔记,记录学习的过程,这是HTML的第一天. HTML(HyperText Mark-up ...

  9. tvm install

    一.系统需求:1.可以访问互联网2.关闭防火墙和selinux 二.安装步骤(进入软件包所在目录):1.rpm -ivh daemontools-0.76-1.el6.x86_64.rpm2.yum ...

  10. CSS3实现页面的平滑过渡

    这是文件的css,全部文件的话请到Github下载:点击这里 @charset "UTF-8"; @font-face {font-family: 'iconfont'; src: ...