第一种：最方便的用法：display:flex + align-items:center
.parent {
height: 100px;
border: 1px solid red;
display: flex;
align-items: center; // 垂直方向居中
justify-content: center; // 水平方向居中
}
.child {
border: 1px solid greenyellow;
width: 100px;
}
为什么flex可以做到垂直居中？
display: flex 可以实现垂直居中是因为flex布局具有强大的对齐和分布控制能力。当父元素的display属性设置为flex时，其子元素会成为flex项目，通过flex容器的对齐属性来控制子元素的对齐方式。 具体来说，当父元素设置为display: flex时，可以使用align-items和justify-content两个属性来控制垂直方向和水平方向的居中
第二种: position:absolute + top&bottom&left&right=0 + margin:auto
.parent {
height: 100px;
border: 1px solid red;
position: relative;
}
.child {
border: 1px solid rgb(128, 93, 93);
position: absolute;
width: 100px;
height: 50px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
CSS的margin属性定义了一个元素左侧边缘与其容器元素边缘之间的距离。 先把子元素脱离文档流，再放在父元素的原点上，然后设置margin:auto；让元素的上下左右四个方向自动和父元素拉开距离，这样就可以达到垂直居中的效果了。
第三种 position：absolute + top：50%；left:50%;transform: translate(-50%; -50%)
CSS的transform属性中，translate函数的x和y参数是相对于元素自身的位置进行移动的
.parent {
height: 100px;
border: 1px solid red;
position: relative;
}
.child {
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
先把子元素脱离文档流，然后相对父元素定位，定位在父元素的中点上，但定位在父元素中点上的其实是子元素左上角（子元素的原点）；所以这时候，而我们要展示的是整个子元素而不是一个点，那我们就需要把子元素的位置再挪一下。用transform: translate(-50%; -50%)完美解决； 效果图和第五种方法是一样的
第四种 position：absolute + top：50%；left:50%;margin-left:xpx; margin-top: xpx;
.-parent {
height: 150px;
border: 1px solid red;
position: relative;
}
.child {
border: 1px solid black;
width: 60px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
这种方法其实和第三种差不多，就是后面挪子元素的用了不同的属性。 都是子元素的位置x往右边多了半个自己的宽，y往下多了半个自己的高，所以计算的时候要注意：margin-left: -子元素的宽/2; margin-top: -子元素的高/2；
第五种 用table
.parent {
border: 1p solid red;
height: 100px;
}
.child {
border: 1px solid rgb(153, 153, 192);
}
表格里的单元格默认是垂直谷中对齐的，只要把内容放在单元格里就可以实现垂直居中效果。
子元素要是想设置成别的对齐方式通过vertical-align属性来设置即可。 在CSS的table布局中，子元素的vertical-align属性值详情如下：
- top：将子元素的顶部与父元素的顶部对齐。
- middle：将子元素的中部与父元素的中部对齐，实现垂直居中。
- bottom：将子元素的底部与父元素的底部对齐。
- baseline：将子元素的基线与父元素的基线对齐。
- text-top：将子元素的顶部与父元素的文本的顶部对齐。
- text-bottom：将子元素的底部与父元素的文本的底部对齐。
这些值可以根据需要来进行选择，实现不同的垂直对齐效果。
需要注意的是，这种方法适用于将内容垂直居中的简单场景，如果需要更复杂的布局或居中方式，可能需要结合其他的CSS属性和技巧来实现。
第六种 用div模拟table
设置父元素display:table;子元素 display:table-cell;vertical-align:middle;就可以实现。
.table {
display: table;
border: 1px solid pink;
height: 50px;
}
.td {
display: table-cell;
border: 1px solid yellowgreen;
vertical-align: middle;
}
第七种 父元素上加伪类
.third-parent {
height: 100px;
height: 150px;
text-align: center;
}
.third-child {
display: inline-block;
width: 50px;
height: 50px;
vertical-align: middle;
}
.third-parent:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.third-parent:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
伪类:before和:after本身是行内元素，它们的vertical-align属性可以影响到父元素的垂直对齐。 通过设置:before和:after的content为空字符串，使它们不显示任何内容，但是它们仍然占据一定的宽度和高度。然后，将它们的vertical-align属性设置为middle，使它们在父元素中垂直居中对齐。这样，整个父元素就可以实现垂直居中的效果。
为什么只用一个伪类出不了垂直居中的效果？
当只使用:before或者只使用:after时，只创建一个空的行内元素，无法实现垂直居中的效果。因为在这种情况下，没有第二个伪元素来与之对齐，无法在垂直方向上对齐其他内容。所以，为了实现垂直居中，需要使用两个伪元素，并设置它们的内容为空，并且使用vertical-align属性将它们对齐到中间位置。
