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. WGS84坐标和UTM坐标的转换

    如题.做了一个Demo,主要是把最后面的参考资料1里面的脚本改成了C语言版本的. 代码: #ifndef __COORCONV_H__ #define __COORCONV_H__ #include ...

  2. Communication 交流

    1:请不要立马抗拒别人的观点,先沉默下来思考,在做出回应. 2:在与别人交流的时候,请尽量先让别人同意你的观点,找到共同点,让别人回答 "是";

  3. SpringMvc处理JSON

    步骤如下: 1.加入jar包 2.编写目标方法,使其返回JSON对应的对象或集合 3.在方法上添加@ResponseBody注解 DispatcheServlet默认装配RequestMappingH ...

  4. datatable动态添加，及填充数据

    DataTable tblDatas = new DataTable("Datas"); tblDatas.Columns.Add("ID", Type.Get ...

  5. 解决MyEclipse报错问题

    转载文章.   做NC的时候从别人那拷了个NC_DEMO结果我这报错他那没报错  import nc.bs.wfengine.engine.ext.TaskTopicResolver;  报错信息:A ...

  6. Azure sdk for python

    http://www.oschina.net/translate/python-windows-azure Len  6:17:54 PM __author__ = 'len.li' from azu ...

  7. SqlServer Analysis Service的事实维度关系

    什么是Fact(事实)维度关系 开发过SSAS Cube的开发人员应该都知道,Cube的维度用法中有一种叫Fact(事实)关系类型,如下图所示: Fact(事实)维度关系就如同上面截图中红框中的描述一 ...

  8. Sprint第二个冲刺（第八天）

    一.Sprint介绍 任务进度: 二.Sprint周期 看板: 燃尽图:

  9. noi 2989 糖果

    题目链接:http://noi.openjudge.cn/ch0206/2989/ 首先,数据很大,直接用背包会re. 这里增加的是对%k 的余数维度.f[i][j] 表示前 i 种糖果取到总颗数模 ...

  10. EntityFramework Core 学习笔记 —— 包含与排除属性

    原文地址:https://docs.efproject.net/en/latest/modeling/included-properties.html 在模型中包含一个属性意味着 EF 拥有了这个属性 ...