一、水平居中
一二三章都是pant+son的简单结构，html代码和效果图就不贴出来了，第四章以后才有
(1)文本/行内元素/行内块级元素
原理：text-align只控制行内内容（文字、行内元素、行内块级元素）如何相对他的块父元素对齐
#pant{text-align:center;}
优缺点
优点：简单快捷，容易理解，兼容性非常好缺点：只对行内内容有效；属性会继承影响到后代行内内容；如果子元素宽度大于父元素宽度则无效，只有后代行内内容中宽度小于设置text-align属性的元素宽度的时候，才会水平居中
()单个块级元素
原理：根据规范介绍得很清楚了，有这么一种情况：在margin有节余的同时如果左右margin设置了auto，将会均分剩余空间。另外，如果上下的margin设置了auto，其计算值为0
#son{width:px;/*必须定宽*/margin:0auto;}
优缺点
优点：简单；兼容性好缺点：必须定宽，并且值不能为auto；宽度要小于父元素，否则无效
()多个块级元素
原理：text-align只控制行内内容（文字、行内元素、行内块级元素）如何相对他的块父元素对齐
#pant{text-align:center;}.son{display:inline-block;/*改为行内或者行内块级形式，以达到text-align对其生效*/}
优缺点
优点：简单，容易理解，兼容性非常好缺点：只对行内内容有效；属性会继承影响到后代行内内容；块级改为inline-block换行、空格会产生元素间隔
(4)使用绝对定位实现
原理：子绝父相，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到水平居中的目的
#pant{height:00px;width:00px;/*定宽*/position:lative;/*父相*/background-color:#f00;}#son{position:absolute;/*子绝*/left:50%;/*父元素宽度一半,这里等同于left:px*/transform:translateX(-50%);/*自身宽度一半,等同于margin-left:-50px;*/width:px;/*定宽*/height:px;background-color:#00ff00;}
优缺点
优点：使用margin-left兼容性好；不管是块级还是行内元素都可以实现缺点：代码较多；脱离文档流；使用margin-left需要知道宽度值；使用transform兼容性不好（ie9+）
(5)任意个元素(flex)
原理：就是设置当前主轴对齐方式为居中。说不上为什么，flex无非就是主轴侧轴是重点，然后就是排列方式的设置，可以去看看文末的flex阅读推荐
#pant{display:flex;justify-content:center;}
优缺点
优点：功能强大；简单方便；容易理解缺点：PC端兼容性不好，移动端（Android4.0+）
本章小结：
对于水平居中，我们应该先考虑，哪些元素有自带的居中效果，最先想到的应该就是text-align:center了，但是这个只对行内内容有效，所以我们要使用text-align:center就必须将子元素设置为display:inline;或者display:inline-block;；其次就是考虑能不能用margin:0auto;，因为这都是一两句代码能搞定的事，实在不行就是用绝对定位去实现了。移动端能用flex就用flex，简单方便，灵活并且功能强大，无愧为网页布局的一大利器！
二、垂直居中
一,二,三章都是pant+son的简单结构,html代码和效果图就不贴出来了,第四章以后才有
(1)单行文本/行内元素/行内块级元素
原理：line-height的最终表现是通过inlinebox实现的，而无论inlinebox所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。
#pant{height:px;line-height:px;/*与height等值*/}
优缺点
优点：简单；兼容性好缺点：只能用于单行行内内容；要知道高度的值
()多行文本/行内元素/行内块级元素
原理同上
#pant{/*或者用span把所有文字包裹起来，设置display：inline-block转换成图片的方式解决*/height:px;line-height:0px;/*元素在页面呈现为5行,则line-height的值为height/5*/}
优缺点
优点：简单；兼容性好缺点：只能用于行内内容；需要知道高度和最终呈现多少行来计算出line-height的值，建议用span包裹多行文本
()图片
原理：vertical-align和line-height的基友关系
#pant{height:px;line-height:px;font-size:0;}img#son{vertical-align:middle;}/*默认是基线对齐，改为middle*/
优缺点
优点：简单；兼容性好缺点：需要添加font-size:0;才可以完全的垂直居中；不过需要主要，html#pant包裹img之间需要有换行或空格
(4)单个块级元素
html代码:
divdiv/div/div
(4-1)使用tabel-cell实现:
原理：CSSTable，使表格内容对齐方式为middle
#pant{display:table-cell;vertical-align:middle;}
优缺点
优点：简单；宽高不定；兼容性好（ie8+）缺点：设置tabl-cell的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display:table;才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height；设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性；内容溢出时会自动撑开父元素
(4-)使用绝对定位实现:
/*原理：子绝父相，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到水平居中的目的*/#pant{height:px;position:lative;/*父相*/}#son{position:absolute;/*子绝*/top:50%;/*父元素高度一半,这里等同于top:75px;*/transform:translateY(-50%);/*自身高度一半,这里等同于margin-top:-5px;*/height:50px;}/*优缺点-优点：使用margin-top兼容性好；不管是块级还是行内元素都可以实现-缺点：代码较多；脱离文档流；使用margin-top需要知道高度值；使用transform兼容性不好（ie9+）*/或/*原理：当top、bottom为0时,margin-topbottom会无限延伸占满空间并且平分*/#pant{position:lative;}#son{position:absolute;margin:auto0;top:0;bottom:0;height:50px;}/*优缺点-优点：简单;兼容性较好(ie8+)-缺点：脱离文档流*/
(4-)使用flex实现:
原理：flex设置对齐方式罢了，请查阅文末flex阅读推荐
#pant{display:flex;align-items:center;}或#pant{display:flex;}#son{align-self:center;}或/*原理：这个尚未搞清楚，应该是flex使margin上下边界无限延伸至剩余空间并平分了*/#pant{display:flex;}#son{margin:auto0;}
优缺点
优点：简单灵活；功能强大缺点：PC端兼容性不好，移动端（Android4.0+）
(5)任意个元素(flex)
原理：flex设置对齐方式罢了，请查阅文末flex阅读推荐
#pant{display:flex;align-items:center;}或#pant{display:flex;}.son{align-self:center;}或#pant{display:flex;flex-diction:column;justify-content:center;}
优缺点
优点：简单灵活；功能强大缺点：PC端兼容性不好，移动端（Android4.0+）
本章小结：
对于垂直居中，最先想到的应该就是line-height了，但是这个只能用于行内内容；其次就是考虑能不能用vertical-align:middle;，不过这个一定要熟知原理才能用得顺手，建议看下vertical-align和line-height的基友关系；然后便是绝对定位，虽然代码多了点，但是胜在适用于不同情况；移动端兼容性允许的情况下能用flex就用flex
三、水平垂直居中
一,二,三章都是pant+son的简单结构,html代码和效果图就不贴出来了,第四章以后才有
(1)行内/行内块级/图片
原理：text-align:center;控制行内内容相对于块父元素水平居中,然后就是line-height和vertical-align的基友关系使其垂直居中，font-size:0;是为了消除近似居中的bug
#pant{height:px;line-height:px;/*行高的值与height相等*/text-align:center;font-size:0;/*消除幽灵空白节点的bug*/}#son{/*display:inline-block;*//*如果是块级元素需改为行内或行内块级才生效*/vertical-align:middle;}
优缺点
优点：代码简单；兼容性好（ie8+）缺点：只对行内内容有效；需要添加font-size:0;才可以完全的垂直居中；不过需要注意html中#pant包裹#son之间需要有换行或空格；熟悉line-height和vertical-align的基友关系较难
()table-cell
原理：CSSTable，使表格内容垂直对齐方式为middle,然后根据是行内内容还是块级内容采取不同的方式达到水平居中
#pant{height:px;width:00px;display:table-cell;vertical-align:middle;/*text-align:center;*//*如果是行内元素就添加这个*/}#son{/*margin:0auto;*//*如果是块级元素就添加这个*/width:px;height:50px;}
优缺点
优点：简单；适用于宽度高度未知情况；兼容性好（ie8+）缺点：设置tabl-cell的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display:table;才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height；设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性；内容溢出时会自动撑开父元素
()button作为父元素
原理：button的默认样式，再把需要居中的元素表现形式改为行内或行内块级就好
button#pant{/*改掉button默认样式就好了,不需要居中处理*/height:px;width:00px;outline:none;border:none;}#son{display:inline-block;/*button自带text-align:center,改为行内水平居中生效*/}
优缺点
优点：简单方便，充分利用默认样式缺点：只适用于行内内容；需要清除部分默认样式；水平垂直居中兼容性很好，但是ie下点击会有凹陷效果！
(4)绝对定位
原理：子绝父相，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到几何上的水平垂直居中
#pant{position:lative;}#son{position:absolute;top:50%;left:50%;/*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/transform:translate(-50%,-50%);}
优缺点
优点：使用margin兼容性好；不管是块级还是行内元素都可以实现缺点：代码较多；脱离文档流；使用margin需要知道宽高；使用transform兼容性不好（ie9+）
(5)绝对居中
原理：当top、bottom为0时,margin-topbottom设置auto的话会无限延伸占满空间并且平分；当left、right为0时,margin-leftright设置auto的话会无限延伸占满空间并且平分
#pant{position:lative;}#son{position:absolute;margin:auto;width:px;height:50px;top:0;bottom:0;left:0;right:0;}
优缺点
优点：无需