水平居中 第一种
//结构
<div class="parent">
<div class="child"></div>
</div>
.parent{
text-align: center;
}
.child{
display:inline-block;
}
text-align属性：是为文本内容设置对齐方式的
值：left,right,center
display属性：
block：块级元素
inline：内联元素（text-align有效） width,height无效（文本称开）
inline-block ：行内块级元素（块+内）
注意：width,height有效
优点：浏览器兼容好（是css2内容）缺点：text-align属性有继承性，导致子级元素的文本也是居中对齐。解决：.child{text-align: left;}
水平居中 第二种
//结构
<div class="parent">
<div class="child"></div>
</div>
.child{
display:table; //或者block
margin: 0 auto;
}
优点：只要对子级元素设置就可以实现缺点：如果子级元素脱离文档流，导致margin属性的值无效
会导致脱离文档流：浮动float，设置绝对定位，固定定位
水平居中 第三种
//结构
<div class="parent">
<div class="child"></div>
</div>
.parent{ position:relative;}
.child{
position:absolute;
lett:50%;
transform:translateX(-50%);
}
优点：父级元素是否脱离文档流，不影响子级元素垂直居中效果缺点：transform是css3中新增属性，浏览器支持情况不好
垂直居中 第一种
//结构
<div class="parent">
<div class="child"></div>
</div>
.parent{
display: table-cell;
vertical-align: middle;
}
样式parent设置为： display: table-cell;vertical-align: middle;
优点：兼容性好（是属于css2的内容，所以对低版本浏览器友好）
缺点：vertical-align属性具有继承性，导致父级元素的文本也是居中显示
垂直居中 第二种
//结构
<div class="parent">
<div class="child"></div>
</div>
.parent{ position:relative;}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}
优点：父级元素是否脱离文档流，不影响子级元素垂直居中效果缺点：transform是css3中新增属性，浏览器支持情况不好
居中（垂直水平居中） 第一种（低版本使用比较好）
//结构
<div class="parent">
<div class="child"></div>
</div>
.parent{
display: table-cell;
vertical-align: middle;
}
.child{
display: block; //或者table
margin: 0 auto;
}
居中（垂直水平居中） 第二种 (优于第一种)
//结构
<div class="parent">
<div class="child"></div>
</div>
.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
总结
搭配（1,3）（2,3）（4）（5）（6）
水平居中(文本搭配) .parent: text-align:center .child: display:inline-block
水平居中（margin自动搭配） child ： display: table; margin: 0 auto;
垂直居中：（表格----单元格搭配） Parent: display: table-cell; Vertical-align: middle
绝对定位（单独）第一种 --------垂直水平 Parent ： position: relative; child ： position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%);
定位（单度）第二种 --------垂直水平 Parent ： position: relative; Child: position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
弹性布局（flex单独） --------垂直水平 Parent: display: flex; justify-content: center; align-items: center;
