http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html

在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法：

一、margin:auto 0 与 text-aligh:center

  • 上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。请在现代浏览器（如Internet Explorer 7、Firefox、Opera等）中运行现在的代码：

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.huaanzn.com/Index.Asp">
     <head>
      <title> new document </title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <style type="text/css">
      div#wrap {
     width:760px;
     margin:0 auto;
     border:1px solid #333;
     
      }
      </style>
     </head> <body>
      <div id="wrap">
      在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可
      <pre>
        div#wrap {
     width:760px;
     margin:0 auto; /*这里的0可以任意值*/
     border:1px solid #ccc;
     background-color:#999;
      }
    </pre>
      </div>
     </body>
    </html>

  • 上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的，不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center，这样页面内所有的元素都会自动居中，同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码：

  • body {text-align:center;}  
    #wrap {text-align:left;}

  • 这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果，我们就可以这样写我们的代码：

  • body { text-align:center; }  
    #wrap { text-align:left;  
                 margin:0 auto;  
    }

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.huaanzn.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.huaanzn.com">
     <head>
      <title> CSS+Div实现水平居中对齐的页面布局 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <style type="text/css">
      body { text-align:center; }
      div#wrap {
     text-align:left;
     width:760px;
     margin:0 auto;
     border:1px solid #333;
     
      }
      </style>
     </head> <body>
      <div id="wrap">
      在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可
      <pre>
        div#wrap {
     width:760px;
     margin:0 auto; /*这里的0可以任意值*/
     border:1px solid #ccc;
     background-color:#999;
      }  在Internet Explorer 6 及以下的版本中我们还要做以下的设置：
     body { text-align:center; } div#wrap {
     text-align:left;
     }
    </pre>
      </div>
     </body>
    </html>

  • 不过这里有一个前提，就是设置居中的元素要有固定的宽度，比如这里我们设定了为760像素。

 
 

二、相对定位与负的边距

  • 对于wrap进行相对定位，然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现：

  • #wrap {  
    position:relative;  
    width:760px;  
    left:50%;  
    margin-left:-380px  
    }

  • 这段代码的意思是，设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> CSS+Div实现水平居中对齐的页面布局 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <style type="text/css">
      div#wrap {
     position:relative;
     width:760px;
     left:50%;
     margin-left:-380px;
     border:1px solid #333;
     
      }
      </style>
     </head> <body>
      <div id="wrap">
      在所有浏览器中都有效的方法：
      <pre>
        div#wrap {
     position:relative;
     width:760px;
     left:50%;
     margin-left:-380px;
     border:1px solid #333;
     background-color:#ccc;
      }</pre>
      </div>
     </body>
    </html>

  • 同样，在设定水平居中前你需要设定一个固定的宽度。

  • P.S.究竟选择哪个方法？

  • 上面两个方法究竟选择哪种方法好呢？在第一种方法中貌似使用了Hack技术，其实并没有，它是中规中矩的Web标准写法，完全符合规范，因此，两个种方法中完全可以随便的选取其中的任一种进行使用，他们不存在CSS hack的问题。

 

三、其它的居中方式

  • 上面所说的都是设定了具体宽度的情况下水平居中的实现。有时候我们想做一个弹性布局，或者当一个元素处于一个容器中时我们只想让它居中并不想设定一个具体的宽度。其实这并不是真正的居中布局，就像对一个100%长度的元素来说，你说它是居中对齐还是居左对齐呢？所以所有不高宽度的居中都不是真正的居中。这样的设计我们是使用的像元素的padding来设置的，实际中我们是改变了父元素的容器大小：

  • 如我们希望wrap元素长度随窗口而改变，同时又维持居中，我们就可以这样写：

  • body {  
     padding:10px 150px;  
    }  
      
    这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.huaanzn.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.huaanzn.com/1999/xhtml">
     <head>
      <title> 随浏览器窗口大小而改变的具有弹性的居中布局 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <style type="text/css">
      body {
     padding:10px 150px;
      }
      div#wrap {
     border:1px solid #333;
     
      }
      </style>
     </head> <body>
      <div id="wrap">
      一种随浏览器窗口大小而改变的具有弹性的居中布局：
      <pre>
      body {
     padding:10px 150px;
      }这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。
    </pre>
      </div>
     </body>
    </html>

[转]CSS网页布局：div水平居中的各种方法的更多相关文章

  1. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  2. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  3. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  4. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  5. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  6. 项目实践2:项目中的CSS网页布局(常用)

    好家伙, 整个网页做下来,最主要的,自然是css的网页布局(菜鸟好用啊) 我需要一个大概这样的布局: 然后上代码: <!DOCTYPE html> <html> <hea ...

  7. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  8. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  9. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  10. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

随机推荐

  1. windows nslookup、tracert 常用命令

    nslookup www.baidu.com 可以指定查询的类型,可以查到DNS记录的生存时间还可以指定使用哪个DNS服务器进行解释. tracert www.baidu.com 路由

  2. tomcat server需要重启的时刻

    1.修改了web project的任何配置文件,都需要重启tomcat 2.修改了任何java class文件,都需要重启tomcat server 3.在项目中添加了任何的文件,包括配置文件.jav ...

  3. 使用ajax上传中遇到的问题

    使用ajaxSubmit提交文件时,正确使用返回的json数据需要用eval在转化一下. 前台文件: $("#form1").ajaxSubmit({ url: 'QueryHan ...

  4. paper 97：异质人脸识别进展的资讯

    高新波教授团队异质人脸图像识别研究取得新突破,有望大大降低刑侦过程人力耗费并提高办案效率         近日,西安电子科技大学高新波教授带领的研究团队,在异质人脸图像识别研究领域取得重要进展,其对香 ...

  5. js __proto 和prototype

    prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象.它是显示修改对象的原型的属性. __proto__是一个对象拥有的内置属性(请注意:pr ...

  6. opensuse-13.1体验

    1  livecd安装 下载地址 http://software.opensuse.org/131/zh_CN 我下载的kde版本的livecd,不像ubuntu支持ultraiso的U盘安装,也不支 ...

  7. 《Unix网络编程》卷一（简介TCP/IP、基础套接字编程）

    通常说函数返回某个错误值,实际上是函数返回值为-1,而全局变量errno被置为指定的常值(即称函数返回这个错误值). exit终止进程,Unix在一个进程终止时总是关闭该进程所有打开的描述符. TCP ...

  8. JavaScript编码风格指南(中文版)

    前言: 程序语言的编码风格对于一个长期维护的软件非常重要,特别是在团队协作中.如果一个团队使用统一规范的编码分风格,可以提高团队的协作水平和工作效率.编程风格指南的核心是基本的格式化规则,这些规则决定 ...

  9. tcp有限状态机

    a.客户端状态迁移 CLOSED->SYN_SENT->ESTABLISHED (ps:主动结束连接)->FIN_WAIT_1->FIN_WAIT_2 (如果另一方程序健壮,会 ...

  10. VB6中的引用传递 与 VB.NET中的引用传递的区别

    首先注意一点,在VB6中缺省参数传递的方式是:引用传递,而在VB.NET中缺省参数传递的方式是:值传递. 然后我们看下面VB6中的引用传递与VB.NET中的引用传递的对比. VB6中的引用传递 Pri ...