-
最常用的水平居中法：把margin设为auto
具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。而且需要满足三个条件
• 元素定宽
• 元素为块级元素或行内元素设置display:block
• 元素的margin-left和margin-right都必须设置为auto -
使用 text-align:center
这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。 -
使用line-height让单行的文字垂直居中
把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。 -
使用绝对定位来进行居中
此法只适用于那些我们已经知道它们的宽度或高度的元素。
绝 对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素 宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
170821_1.png
运行效果：
170821_2.png
- 另一种使用绝对定位来居中的方法
此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE8+,谷歌，火狐等符合w3c标准的现代浏览器。
下面用一段代码来了解这种方法：
170821_3.png
运行效果：
170821_2.png
- 使用浮动配合相对定位来进行水平居中
此方法也是关于浮动元素怎么水平居中的解决方法，并且我们不需要知道需要居中的元素的宽度。
浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来。在这里包裹层wraper没有设定实际宽度，将会自适应child的宽度，所以我们只要设置left:-50%就相当于再移动该元素的一般的宽度了。这样我们不需要知道子元素的具体宽度。
这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。
看下代码：
170821_4.png
运行结果：
170821_5.png
注意：虽然看起来垂直也居中了，但实际上数值是有差距的，因为子元素设置的width或者height是百分比的值跟父元素的值有关。
设置width为百分比，不需要父元素明确设置width。但是子元素设置height百分比，父元素必须明确设置高度，原因如下两图。因为上面的父元素没有设置高度，所以top没有起作用，但是left起作用，是因为父元素width不是强制性的。所以这里的.child不能设置top，这个元素会有一定的偏移量。
宽度：
170821_6.png
高度：
170821_7.png
总结来说就是：The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.
- 使用CSS3的transform属性
170821_8.png
- 使用Flex布局
170821_9.png
前6种转自http://www.cnblogs.com/2050/p/3392803.html并对一些错误进行了修改
网友评论