⽔平居中的⼏种⽅法-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⽔平居中div中的div居中
我们知道text-align也常⽤来设置居中，但它的意义和应⽤场景完全不同于利⽤magin来居中元素。text-align属性具有以下特点。
⾸先text-align也只应⽤于块级元素
text-align影响的是元素中的⽂本的对其⽅式（默认是left，设置为center时⽔平居中）
所以，将text-align设置为center时，只有当应⽤于块级元素并且元素内容为⽂本时，才会⽣效，即text-align不会控制元素的对齐，⽽只影响其内容⽂本，⽽margin只控制元素在⽗元素中的对齐，⽽不会影响⾃⾝的内容（即时时⽂本），另⼀个不同时，当元素设置为浮动时，左右margin设置为auto来居中元素的⽅式会失效，因为这种居中⽅式原本利⽤的就是正常流中七个属性和相加等于⽗元素的width值，⽽text-align原本就是将块级元素中的⽂本居中，与是否浮动或是否是正常流⽆关。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。