很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题，margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应，其实就是水平居中的意思，在这里说两个典型的错误引起的不能居中的问题：

1、没有设置宽度

<div style="margin:0 auto;"></div>

看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题。

2、没声明DOCTYPE

1）DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。

2）看看下面的代码，是不是很熟悉？像这样的，在文档最顶端，所有代码之上的乱七八糟的东西，就是用来声明DOCTYPE的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3）你有三种选择，用来声明DOCTYPE

* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

4）至于选择哪种，使用过渡的就可以了。

说了半天，margin:0 atuo;不起作用，不能居中的话，看看你的文档最顶端有没有声明DOCTYPE，没有就复制粘贴一下，就可以了。

还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时间还不一样，其原因可能在于设置了margin-top的高度不为0时，会出现意想不到的效果。

CSS中设置margin:0 auto; 水平居中无效的原因分析的更多相关文章

  1. margin:0 auto;不能居中的原因

    原因: 1.没有设置本身元素和父元素的宽度 2.本身元素使用了绝对定位和浮动 2.没声明DOCTYPE

  2. CSS中margin: 0 auto；样式没有生效

    问题:有两个元素: A, B.两则是嵌套关系,A是B的父节点.A和B都是块元素.当在A上设置:margin: 0 auto的时候,B并没有在页面中居中. margin: 0 auto 为什么没有生效? ...

  3. IE下div使用margin:0px auto不居中的原因

    IE下div使用margin:0px auto不居中的原因 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用, ...

  4. 转载：IE下div使用margin:0px auto不居中的原因

    转自:http://www.blogjava.net/sealyu/archive/2010/01/08/308640.html 一般在将div居中显示时,使用css: divX {margin:0  ...

  5. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

  6. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

  7. css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？

    auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...

  8. margin:0 auto在IE中失效的解决方案

    转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html 最近在开发项目的时候,发现在火狐浏览器中设置外容器margin ...

  9. CSS样式margin:0 auto不居中

    <style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...

随机推荐

  1. Spring MVC之视图解析器

    Spring MVC提供的视图解析器使用ViewResolver进行视图解析,实现浏览器中渲染模型.ViewResolver能够解析JSP.Velocity模板.FreeMarker模板和XSLT等多 ...

  2. mysql distinct、group_concat

    mysql distinct语句用于查询多条不重复记录值(去重.过滤多余的重复记录) distinct同时作用了两个字段或者两个以上的字段,必须得作用了的字段都相同的才被排除.如果想让单个列" ...

  3. sql server 日期转换函数 convert()

    --内容来自:http://hi.baidu.com/muqingz/item/8fb7b3ca8a485b0cac092f7b Select CONVERT(varchar(100), GETDAT ...

  4. 利用dokan作虚拟磁盘开发

    dokan是用户态的文件系统驱动,可以称之为fuse for windows.可以用来开发虚拟磁盘,即在“我的电脑”中虚拟出一个硬盘来,可以是硬盘,也可以是可移动磁盘或者网络硬盘. CreateFil ...

  5. ural1003 Parity

    Parity Time limit: 2.0 secondMemory limit: 64 MB Now and then you play the following game with your ...

  6. 推荐！国外程序员整理的Java资源大全

    http://www.importnew.com/14429.html 本文由 ImportNew - 唐尤华 翻译自 github akullpp.欢迎加入翻译小组.转载请见文末要求. 构建 这里搜 ...

  7. 如何编译生成 dll

    原文:http://blog.csdn.net/qianchenglenger/article/details/21599235 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[ ...

  8. 在MyEclipse8.6中设置jQuery自动提示 - 肖飞figo的云计算专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  9. Arduino中hex文件的保存及应用（转）

    源:Arduino中hex文件的保存及应用 arduino在编译.链接.下载之后,hex文件自动删除了,造成软件仿真(如用proteus仿真)及其他单片机板应用的不便.以下是自己实践的小结,与大家分享 ...

  10. php部分--文件操作

    php中的文件指的是文件和文件夹,不是单指文件. 1.判断文件(判断是文件还是文件夹) 找文件,输出结果为file,代表的是文件. var_dump(filetype("./aa.txt&q ...