作为一名草根站长，折腾网站几乎是每天必修课，有时在调整网页效果的时候就需要一些Web前端知识。笔者初学CSS，一个问题困扰我许久了，那就是CSS中margin:0 auto和text-align:center都能使元素居中，它们有什么区别呢？

首先需要对这两个属性的基本概念作下了解

属性基本概念

1、margin:是指当前元素到相邻元素间的距离；margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！这就是水平居中的意思。

2、text-align 指当前元素中内容的对其方式。注释：所有浏览器都支持 text-align 属性；任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

二者间的区别

1、margin:0 auto 设置块元素（或与之类似的元素）的居中。如：

通俗的讲：就是让容器中的自己居中，常作用于块元素，且需要配合宽度使用。

2、text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。如：

通俗的讲：就是让自己容器中的元素居中，常作用于文本或图片等内联元素。

通常情况下 text-align: center 的方式就可以满足居中对齐的方式，但页面布局时存在两个特殊情况：position: absolute 和 position: fixed，这两种情况下的元素会脱离布局流，而导致无法正确居中，这时如要使其居中，需要配合多个 css 属性使用：

IE和火狐浏览器中的区别

1、当设置body{text-align:center;}。 在IE浏览器中，段落P，图片img同时实现了居中对齐，也就是说text-align:center;同时作用于元素p与元素img。 在火狐浏览器中，段落P，没有能实现居中对齐，而图片img实现了居中对齐，也就是说text-align:center;作用于img标签，而段落p标签没有起到居中的作用。

2、当设置段落 p {margin:0 auto;}。 在IE与火狐中，段落P均实现了居中对齐。图片img由于不是作用对象，所以不会居中对齐。

有三种情况需要说明：

1、margin:0 auto;的选择器是作用对象，如div，p，而不是body。如果设置：body { margin:0 auto; }将不会达到任何效果，除非你定义body的宽度，那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置， 我们最大化窗口将会看到段落并非处于窗口的最左上角。

2、设置段落 p {text-align:center;} 将要实现的并不是段落本身的对齐方式，而是段落内元素居中对齐。

3、 设置图片标签img {margin:0 auto;} ，就犯了一个小错误，img类于内联对象，不可以设置图片img标签的margin属性，如果一定要设置，那么先将它的属性转变为块元素，如下面的代 码：img {display:block; margin:0 auto;}