目录
1、margin
注意：用margin来使子盒子居中，但是这种方法会有一定的缺陷：需要给父盒子一个 overflow: hidden属性来清除塌陷，而且还需要精确计算上下的边距 如果父盒子改变大小，则还需重新计算大小。
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
overflow: hidden;/*用来清除父盒子塌陷*/
}
.son {
width: 200px;
height: 200px;
margin: 150px auto;
background-color: purple;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
2、定位+margin
2.1 、定位+margin（一）
使用定位加外边距的方法来使子盒子居中，但是这种方法也会有一定的缺陷：如果盒子大小需要更改 同时需要更改外边距来让子盒子从新居中。
/*
通过定位父盒子上和左各50% 然后再用外边距让盒子往上走自己宽高的一半
缺点：如果盒子大小需要更改 同时需要更改外边距来让子盒子从新居中
*/
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.son {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background-color: purple;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
2.2、定位+margin（二）
使用定位加外边距的方法来使子盒子居中，这样虽然不会出现两个盒子更改了宽高 而不居中问题 但需要将子盒子中的上下左右的距离全部设置一遍，比较麻烦
通过对盒子定位 让其在父盒子中上下左右距离都为0 再通过margin=0的方法让其实现居中
这样不会出现子盒子更改了宽高 而不居中问题 但需要将上下左右的距离全部设置一遍，比较麻烦
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.son {
width: 200px;
height: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: purple;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
3、定位加位移
使用定位加位移的方法来使子盒子居中，这样既不会出现更改盒子宽高之后就不会居中的问题，而且相对于第三种方法来说代码量也少
跟第上边第一种相似，也是通过对其定位的父盒子上和左各50%
然后使用transform属性来沿X轴与Y轴平移自己本身宽高的一半来设置
这样既不会出现更改盒子宽高之后就不会居中的问题，也减少了代码量。
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.son {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: purple;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
4、flex
沿主轴和侧轴全部居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
display: flex;
/* 主轴对齐水平 */
justify-content: center;
/* justify-content: space-around; */
/* justify-content: space-evenly; */
/* 侧轴居中对齐 */
align-items: center;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>5、八种经典写法总结：
5.1、第一种：
水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效
margin: 0 auto;5.2、第二种：
水平居中，子父元素宽度固定，父元素设置 text-align: center;
子元素设置 display: inline-block; 子元素不能设置浮动，否则居中失效。
如果将元素设置为 inline , 则元素的宽高设置会失效，这就需要内容来撑起盒子
#div2 {
text-align: center;
}
#div2 p{
margin: 0;
display: inline-block;
}
5.3、第三种：
子绝父相，子盒子绝对定位，父盒子相对定位
水平垂直居中，子元素相对于父元素绝对定位，
子元素top，left设置为50%，子元素margin的top，left减去自身高，宽的一半
#div3 {
position: relative;
}
#div3 p {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}5.4、第四种：
水平垂直居中，子元素相对于父元素绝对定位，
将子元素的top，right，bottom，left均设为0，然后设置子元素 margin: auto;
#div4{
position: relative;
}
#div4 p{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}5.5、第五种：
水平垂直居中，父元素设置 display: table-cell; vertical-align: middle;
子元素设置 margin: auto;
这种方式是让所有的子元素作为一个整体垂直居中，并不能单独指定某一个子元素居中
#div5{
display: table-cell;
vertical-align: middle;
}
#div5 p{
margin: auto;
}5.6、第六种：
水平垂直居中，子元素相对定位，top，let设为50%，transform: translate(-50%, -50%);
这种方式并不会释放子元素在文档中所占的位置。
#div6{
width: 300px;
height: 300px;
border: 1px solid red;
}
#div6 p {
width: 100px;
height: 100px;
background-color: green;
margin: 0;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}5.7、第七种：
水平垂直居中，子元素相对于父元素绝对定位，
子元素top，let设为50%，transform: translate(-50%, -50%);
这种方式会释放子元素在文档中所占的位置
5.8、第八种：
水平垂直居中，父元素设置 display: flex; justify-content: center; align-items: center;
justify-content: center; 是让所有的子元素作为一个整体居中。
#div8{
display: flex;
justify-content: center;
align-items: center;
}
#div8 p{
margin: 0;
}