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. ThinkPHP讲解（十）——第三方类的引入：以分页为主

    第三方类的引入,以分页类为例: 1.在控制器里新建一个分页的操作方法FenYe() 注意:第三方类Page.class.php放在Think或Home文件夹下,并新近一个文件夹,放在里面,并在其类里加 ...

  2. SQL2005中的事务与锁定（三）- 转载

    ------------------------------------------------------------------------ -- Author : HappyFlyStone  ...

  3. Ninject简介

    1.为什么要用Ninject? Ninject是一个IOC容器用来解决程序中组件的耦合问题,它的目的在于做到最少配置.其他的的IOC工具过于依赖配置文件,需要使用assembly-qualified名 ...

  4. 十分钟学会mysql数据库操作

    Part1:写在最前 MySQL安装的方式有三种: ①rpm包安装 ②二进制包安装 ③源码安装 这里我们推荐二进制包安装,无论从安装速度还是用于生产库安装环境来说,都是没问题的.现在生产库一般采用My ...

  5. HTML5、CSS3响应式设计——笔记

    1.1.响应式网页设计 响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(EthanMarcotte)提出.他在A List Apart 发表了一篇开创性的 ...

  6. Docker 容器中“TERM environment variable not set.”问题解决

    在查容器内部资源利用情况时候,发现top命令无法使用,报错“TERM environment variable not set.”.从网上找到了解决方案,如下. [root@localhost ~]# ...

  7. Asp.net 头像的简单实现

    1:创建数据库 Create Table ImageSave ( ID ,), Name ), img image ) 2:上传照片页关键代码 前台: <div> <asp:File ...

  8. RabbitMQ入门教程（转）

    http://blog.csdn.net/column/details/rabbitmq-for-java.html http://blog.csdn.net/anzhsoft/article/det ...

  9. Linux -- 文件统计常用命令

    标签(空格分隔): Linux sort -- 文件内排序命令 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次比较其ASCII码. 按每行升序排序: sort seq.tx ...

  10. Java开发中经典的小实例-（ 鸡蛋0.1元一个，鸭蛋3元一个，鹅蛋6元一个。求一百元买一百个蛋。）

    public class Test24 {    public static void main(String[] args) {        // 鸡蛋0.1元一个,鸭蛋3元一个,鹅蛋6元一个.求 ...