水平居中的几种方法-margin,text-align

水平居中的几种方法-margin,text-align

在对元素进行水平居中时，可能会有多种方法，但不同的居中方法的适用场景也可能是不相同的。

margin设置为auto来水平居中

我们知道，在普通流的块级元素中，元素的七个水平属性相加的和等于包含块的width值，利用这个属性，将margin-left,和margin-width两个值设置为auto,它们会被剩下的值均分，设置为相同的长度（注意width必须指定，否则当三个值都为auto时，margin-left和margin-right会被置为0），也就将元素在其包含块中居中了（块级元素的父元素一般也是块级元素，因此其包含块通常是其父元素）。如下样式1.1的设置

 div.outer{width:220px;border:3px solid yellow}
div.inner{margin:auto;width:100px;height:40px;border:3px solid red}

样式1.1

元素表现如下:

图1.1
可以看到，inner元素确实被包含块所居中了，那么是只要设置了左右margin为auto就能水平居中该元素吗？来看样式1.2的设置

 div.outer{width:220px;border:3px solid yellow}
div.inner{float:left;margin:auto;width:100px;height:40px;border:3px solid red}

样式1.2
此时，元素表现如下图

可以看到，此时子元素并没有居中于父元素，而本次设置中唯一不同的是，为inner类设置了左浮动，设置了左浮动后，左右margin为auto就完全失去了居中的效果，这是因为当元素设置为浮动后，就脱离了正常流，此时元素本身的框是由自己的包裹内容来决定的，已经不依赖于父元素的宽度了，更不存在于元素本身七个属性的值得和相加必须等于父元素的宽度了，所以也就不会用两个auto值来填充余下的空缺进而来平分使得元素本身水平居中了。
这也就是为什么说左右margin设置为auto会对普通流（正常流）中的块级元素有效了。

text-align水平居中

我们知道text-align也常用来设置居中，但它的意义和应用场景完全不同于利用magin来居中元素。text-align属性具有以下特点。

• 首先text-align也只应用于块级元素
• text-align影响的是元素中的文本的对其方式（默认是left，设置为center时水平居中）

所以，将text-align设置为center时，只有当应用于块级元素并且元素内容为文本时，才会生效，即text-align不会控制元素的对齐，而只影响其内容文本，而margin只控制元素在父元素中的对齐，而不会影响自身的内容（即时时文本），另一个不同时，当元素设置为浮动时，左右margin设置为auto来居中元素的方式会失效，因为这种居中方式原本利用的就是正常流中七个属性和相加等于父元素的width值，而text-align原本就是将块级元素中的文本居中，与是否浮动或是否是正常流无关。