css margin:0 auto无法居中的原因

首先向大家介绍margin:0 auto到底是什么意思，为什么可以用它来实现水平居中。

margin:0 auto表示上下边距为0，左右边距为自适应(大家可以阅读这篇文章了解更多margin的知识),主要是左右边距取到居中的作用，那什么叫自适应呢，自适应就是指在一定宽度的容器里面，根据自身的大小决定显示在什么位置。所以在使用margin:0 auto居中时，一定要设置容器的宽度，如果宽度都没有，那么怎么自适应呢？下面列举两个实例：

margin:0 auto设置宽度:

<!DOCTYPE html>
<html>
<head>
<title>   /* http://www.manongjc.com/article/1261.html */</title>
<style>
.box{
    margin:0 auto;
    background:red;
    width:200px;
}
</style>
</head>
<body>
<div class="box">我设置了宽度，所以使用margin:0 auto属性，我会居中显示</div>
</body>
</html>

在线运行

示意图：

css margin:0 auto无法居中的原因

因为DIV设置了宽度，所以相对整个页面，div是居中的

margin:0 auto没有设置宽度:

<!DOCTYPE html>
<html>
<head>
<style>
.box{
    margin:0 auto;
    background:red;
}
</style>
</head>
<body>
<div class="box">我没有设置宽度，所以即使使用margin:0 auto属性，我会不会居中显示</div>
</body>
</html>

示意图：

css margin:0 auto无法居中的原因

因为DIV没有设置宽度，所以即使使用了margin:0 auto，也不会取到任何作用。

例外，如果我们在html文档开头声明<!DOCTYPE html>(看上面代码)，那么，就算你设置了width，margin:0 auto水平居中也可能不取作用。因此在html文档开头最好声明一下<!DOCTYPE html>。至于<!DOCTYPE html>有什么作用，这里我只做简单说明：

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