#水平居中
1.1.已知宽度块元素宽度 :
.child {
width: 1000px;
margin: 0 auto;
}
1.2.文本内容居中:
.parent {
text-align: center;
}
1.3.通过表格:
.child {
display: table;
margin: 0 auto;
}
1.4.已知宽度,通过设置position:absolute,margin-left为宽度的负一半
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
width: 150px;
margin-left: -75px;
}
1.5.未知宽度,通过设置position:absolute
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
1.6.使用flex布局实现（兼容性不好，感觉有点变成浮动的效果，不在文档流）
第一种：
.parent {
display: flex;
justify-content: center;
}
第二种：
.parent {
display: flex;
}
.child {
margin: 0 auto;
}
#垂直居中
2.1.文本垂直居中
.child {
height: 20px;
line-height: 20px
}
2.2.vertial-align:middle;
第一种方法：
.parent {
display: table-cell;
vertical-align: middle;
height: 20px;
}
第二种方法：
.parent {
display: inline-block;
vertical-align: middle;
line-height: 20px;
}
2.3.未知高度，设置position:absolute
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
2.4.已知高度，设置position:absolute,margin-top为高度的负一半
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 150px;
margin-top: -75px;
}
2.5.使用flex布局实现
.parent {
display: flex;
align-items: center;
}
