相信大家在网上都多多少少看到过一下文章，但是大多数写的代码包括HTML 的结构和样式挤在一起，比较杂乱，不方便阅读，所以我自己整理了一份相对比较容易阅读的文档，希望能对大家有所帮助！
1. 利用定位
给父元素设置相对定位，子元素设置绝对定位，子元素设置 top:50%，left:50%，margin-top子元素高的一半，margin-left，子元素宽的一半
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
2. 利用transform
父元素设置相对定位，子元素设置绝对定位，子元素设置 top:50%，left:50%， transform-translate（-50% -50%）
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. 利用margin:auto
父元素设置相对定位，子元素设置绝对定位，子元素设置 top:0，left:0，button:0，right:0，margin：auto
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
margin: 0 auto;
}
4. 利用 display：table-cell
父元素设置 display：table-cell，vertical-align: middle, text-align:center
子元素设置 display：inline-block
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
display: inline-block;
}
5. 利用 display：flex 布局
父元素设置 display：flex，justify-content:center, align-item:center
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
}
6. 计算子元素与父元素之间的空间距离（不推荐）
父元素 宽高500px，子元素宽高100px，
子元素设置 margin-top：200px，margin-left：200px
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
margin-top: 200px;
margin-left: 200px;
}
