水平居中
1.文本/行内元素/行内块级元素
原理：text-align只控制行内内容（文字、行内元素、行内块级元素）如何相对他的块父元素对齐。
<div id="parent">
<div id="child">水平居中布局</div>
</div>
#parent{
text-align: center;
}
**优点：**简单快捷，容易理解，兼容性好；
**缺点：**只对行内内容有效；属性会继承影响到后代行内内容；如果子元素宽度大于父元素则无效，只有后代行内内容中宽度小于text-aligin属性的元素宽度的时候，才会水平居中。
2.单个块级元素
**原理：**在margin有节余的同时，如果左右设置了auto，将会均分剩余空间。另外，如果上下的margin设置了auto，其计算值为0；
<div id="parent">
<div id="child">水平居中布局</div>
</div>
#child{
width: 100px;/*必须定宽*/
margin: 0 auto;
}
**优点：**简单快捷，兼容性好；
**缺点：**必须定宽，并且不能为auto; 宽度要小于父元素，否则无效；
3.多个块级元素
原理：display: inline-block将块级元素转为行内块形式，以达到text-align生效。
<div id="parent">
<div id="child">水平居中布局</div>
<div id="child">水平居中布局</div>
</div>
#parent{
text-align: center;
}
#child {
display: inline-block;
/*将块级元素转为行内块形式*/
}
**优点：**简单，兼容性好；
**缺点：**块级改为display: inline-block`换行、空格会产生元素间隔；
4.绝对定位
**原理：**子元素绝对定位，父元素相对定位，top、right、bottom、left的值时相对于父元素尺寸的。然后margin或者transform是相对于自身尺寸的。组合使用达到居中的目的；
<div id="parent">
<div id="child">水平居中布局</div>
</div>
#parent{
postion: relative;
}
#child {
postion: absolute;
left: 50%;
transform: translateX(-50%);
/*自身宽度的一般，等同于margin-left: -50px;*/
}
**优点：**不管是块级还是行内元素都可以实现；
**缺点：**脱离文档流；
5.任意元素（flex）
**原理：**设置当前主轴对象方式为居中
<div id="parent">
<div id="child">水平居中布局</div>
</div>
#parent{
display: flex;
justify-content: center;
}
**优点：**功能强大；简单方便；
**缺点：**新特性，兼容性不好
垂直居中
1.文本/行内元素/行内块级元素
原理：line-height的最终表现是通过inline box实现的，而无论inline box所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。
<div id="parent">
<div id="child">垂直居中布局</div>
</div>
#parent{
height: 150px;
line-height: 150px;
}
**优点：**简单快捷，兼容性好；
**缺点：**只能用于单行行内内容；要知道高度；
2.图片垂直居中
原理：vertical-align 和 line-height的基友关系
<div id="parent">
<div id="child">垂直居中布局</div>
</div>
#parent{
height: 150px;
line-height: 150px;
font-size: 0;
}
/*默认是基线对齐，改为middle*/
img#child{
vertical-align: middle
}
**优点：**简单，兼容性好；
**缺点：**需要添加 font-size: 0;才可以完全的垂直居中；
3.单个块级元素
3-1. 使用table-cell实现：
**原理：**使用表格内容对齐方式.
<div id="parent">
<div id="child">垂直居中布局</div>
</div>
#parent{
display: table-cell;
vertical-align: middle;
}
**优点：**简单，宽高不定；
**缺点：**设置table-cell的元素，宽度和高度设置百分比无效，需要给它的父元素设置display: table;才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height;设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性;内容溢出时会自动撑开父元素;
3-2.绝对定位实现：
**原理：**子元素绝对定位，父元素相对定位，top、right、bottom、left的值时相对于父元素尺寸的。然后margin或者transform是相对于自身尺寸的。组合使用达到居中的目的；
<div id="parent">
<div id="child">垂直居中布局</div>
</div>
#parent{
postion: relative;
}
#child {
postion: absolute;
left: 50%;
transform: translateY(-50%);
/*自身宽度的一般，等同于margin-top: -25px;*/
}
#parent{
postion: relative;
}
#child {
postion: absolute;
margin: auto;
top:0;
bottom:0;
height:50px;
}
**优点：**不管是块级还是行内元素都可以实现；
**缺点：**脱离文档流；
3-3.任意元素（flex）
**原理：**设置当前主轴对象方式为居中
<div id="parent">
<div id="child">垂直居中布局</div>
</div>
#parent{
display: flex;
flex-direction: column;
justify-content: center;
}
**优点：**功能强大；简单方便；
**缺点：**新特性，兼容性不好
水平垂直居中
1.table-cell
**原理:**使表格内容垂直对齐方式为middle实现垂直居中; 然后根据是行内内容还是块级内容采取不同的方式达到水平居中。
<div id="parent">
<div id="child">水平垂直居中布局</div>
</div>
#parent{
display: table-cell;
vertical-align: middle;
text-align: center;/*行内级元素添加这个*/
}
#child {
margin: 0 auto/*块级元素添加这个*/
}
**优点：**简单，宽高不定；
缺点：vertical-align属性具有继承性，导致父元素的文本也是居中显示的;
2.postion
**原理：**子元素绝对定位，父元素相对定位，top、right、bottom、left的值时相对于父元素尺寸的。然后margin或者transform是相对于自身尺寸的。组合使用达到居中的目的；
<div id="parent">
<div id="child">垂直居中布局</div>
</div>
#parent{
postion: relative;
}
#child {
postion: absolute;
left: 50%;
top: 50%
transform: translate(-50%, -50%);
/*自身宽度的一般，等同于margin-top: -25px;*/
}
**优点：**不管是块级还是行内元素都可以实现；
**缺点：**脱离文档流；
3.flex
<div id="parent">
<div id="child">垂直居中布局</div>
</div>
#parent{
display: flex;
align-items: center;
justify-content: center;
}
