目录
要实现的两个嵌套盒子，parent为父盒子外面的大盒子，child为里面的小盒子。全文html结构都为此。
<div id="parent">
<div id="child"></div>
</div>
css文件宽高背景颜色随便设置，只是为了方便看效果。
1.flex布局
#parent{width:200px;height:200px;background:pink;
/* 第一种方式：使用flex布局
给父元素设置flex布局使子元素在内部垂直居中，flex中有两个属性align-items，justify-conten分别代表水平垂直的位置，均设置为center即可实现子元素居中*/
display:flex;
align-items: center;
justify-content: center;
}
#child{background:rgb(14, 113, 179);width:50px;height:50px;
/* 直接给子元素设置margin也可以，只给父元素一个display ，flex属性和margin不一同使用，但是都可以实现居中效果，下面讲的grid同理*/
margin:auto;
}
2.定位+margin
#parent2{width:200px;height:200px;background:rgb(192, 255, 213);
/* 第二种方式：使用绝对定位，父元素设置相对定位relative，子元素相对于父元素进行绝对定位
接着设置子元素左上角居中，即距离父元素上边和左边各一半，在减去外边距自己宽高的一半实现子元素中心点居中*/
position:relative;
}
#child2{background:red;width:50px;height:50px;
position: absolute;
top:50%;
left:50%;
margin-left:-25px;
margin-top:-25px;
}
3.定位+translate
#parent3{width:200px;height:200px;background:rgb(99, 25, 148);
/* 第三种方式：使用绝对定位，
使用tranlata进行平移，与第二种方法类似，原理相同*/
position:relative;
}
#child3{background:red;width:50px;height:50px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
4.网格布局（grid）
#parent4{width:200px;height:200px;background:rgb(207, 130, 13);
/* 第四种方式：使用网格布局grid
给父元素display设置网格布局，子元素设置垂直居中
直接设置margin也可以，与flex类似*/
display:grid;
}
#child4{background:red;width:50px;height:50px;
可以直接设置属性，，也可以不设置属性直接写margin
justify-self: center;
align-self: center;
/* margin:auto; */
}
5.table布局
#parent5{width:200px;height:200px;background:rgb(205, 142, 224);
/* 第五种方式：使用table布局
给父元素设置table-cell，水平垂直居中，给子元素设置为行内元素*/
display:table-cell;
vertical-align: middle;
text-align: center;
}
#child5{background:rgb(51, 228, 16);width:50px;height:50px;
display: inline-block;
}
6.：：before伪元素布局
#parent6{width:200px;height:200px;background:rgb(69, 74, 75);
/* 第六种方式：使用伪元素before
内容设置空，设为行内元素，宽为0，高100%，垂直居中
子元素同样设置为行内元素，垂直居中*/
font-size: 0;
text-align: center;
}
#parent6::before{
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
#child6{background:rgb(236, 241, 235);width:50px;height:50px;
display: inline-block;
vertical-align: middle;
}