在CSS中，垂直居中的方法有很多，具体的实现方式取决于布局的上下文（如是否有父容器、是否是块级元素、是否固定高度等）。以下是最全的CSS垂直居中方法：
1. 使用line-height (仅用于单行文本)
适用于单行文本，并且元素的高度已知。
div {
height: 200px;
line-height: 200px; /* line-height 设置为与容器高度相同 */
text-align: center;
}
2. 使用vertical-align (用于行内元素)
对于行内元素或表格单元格。
span {
vertical-align: middle;
}
如果是块级元素，可以将其转换为表格单元格。
div {
display: table-cell;
vertical-align: middle;
}
3. flexbox布局
最通用且灵活的方法之一，适用于各种场景。
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中，可选 */
height: 200px;
}
4. grid布局
使用CSS Grid也可以轻松实现居中。
.container {
display: grid;
place-items: center; /* 水平和垂直居中 */
height: 200px;
}
5. 绝对定位加上负margin (已知宽高)
适用于已知宽高的元素。
div {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 元素高度的一半 */
margin-left: -50px; /* 元素宽度的一半 */
}
6. 绝对定位加上transform (未知宽高)
这种方法适用于任何元素，且不需要知道宽高。
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
7. 使用table布局
将父容器设置为表格，然后让子元素垂直居中。
.container {
display: table;
height: 200px;
width: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
8. 使用padding (已知高度)
适用于已知高度的元素，通过增加内边距使内容居中。
div {
height: 200px;
padding-top: 50px; /* 父容器高度的一半 */
padding-bottom: 50px;
box-sizing: border-box; /* 确保 padding 不影响总高度 */
}
9. 使用position: relative + position: absolute
适用于相对和绝对定位的组合。
.container {
position: relative;
height: 200px;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
10. writing-mode (仅限某些场景)
改变文字的书写模式来达到垂直居中的效果，适用于特殊场景。
div {
writing-mode: vertical-lr;
text-align: center;
height: 200px;
}
11. flow-root（新兴方法）
结合block级元素的特殊性。
.container {
display: flow-root;
}
.child {
margin-block-start: auto;
margin-block-end: auto;
}
12. object-fit (适用于图片或媒体元素)
当需要使图片或其他媒体元素在容器中垂直居中时可以使用。
img {
object-fit: contain;
height: 100%;
width: 100%;
}
这些方法涵盖了从文本到块级元素、已知高度到未知高度、简单到复杂布局的多种垂直居中场景。
虽然上述方法涵盖了大部分常见的 CSS 垂直居中的实现，但还有一些特殊或不太常用的方式，适用于特定场景。以下是其他几种垂直居中的方法：
13. 使用flex的column方向
这是flex布局的变体，当你想让子元素按列排列时，可以通过flex-direction: column实现。
.container {
display: flex;
flex-direction: column; /* 让主轴变为竖直方向 */
justify-content: center; /* 垂直居中 */
height: 200px;
}
14. 多重transform (3D 变换)
使用 CSS3 的 3D 变换实现居中，可以应用于一些复杂场景。
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0); /* 类似2D transform */
}
15. ex 单位结合 line-height
ex 单位是相对于字体的 x-height（即小写字母的高度），可以用来做更精细的文本居中控制。
div {
font-size: 16px;
line-height: 1ex;
height: 10ex; /* 以字体高度为基础的容器 */
text-align: center;
}
16. CSS Houdini（前沿技术）
CSS Houdini 是一项前沿技术，允许开发者通过 JavaScript 自定义浏览器的渲染方式。虽然它并不常用于垂直居中，但理论上可以通过自定义布局和绘制来实现完全自定义的居中效果。
17. 结合伪元素
通过伪元素来调整父容器的布局从而实现居中。
.container {
position: relative;
}
.container::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.child {
display: inline-block;
vertical-align: middle;
}
18. clip-path (裁剪路径)
clip-path 主要用于裁剪形状，虽然不常用，但也可以通过裁剪调整元素的居中位置，适合需要复杂裁剪的场景。
div {
position: absolute;
top: 50%;
left: 50%;
clip-path: circle(50% at 50% 50%); /* 居中并裁剪圆形区域 */
}
19. CSS4的box-align (未来规范)
虽然还未完全支持，但未来 CSS4 中有新的对齐方法，例如box-align，能够提供更多的居中对齐选项。
.container {
box-align: center;
box-pack: center;
}
20. 使用svg布局
如果使用SVG来设计布局，可以通过
21. min-height结合flex
通过min-height来确保最小高度，然后使用flex进行居中。
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* 视口高度的最小高度 */
}
22. aspect-ratio (宽高比)
aspect-ratio 可以在创建响应式设计时保持元素的宽高比，并通过内置的居中方式实现垂直居中。
.container {
aspect-ratio: 1 / 1; /* 宽高比为1:1 */
display: flex;
justify-content: center;
align-items: center;
}
23. text-orientation (仅适用于竖排文本)
适用于竖排文本布局时，结合writing-mode实现的另一种方法。
div {
writing-mode: vertical-lr;
text-orientation: upright;
height: 200px;
text-align: center;
}
24. 使用JavaScript动态居中
在某些复杂布局中，可能需要使用JavaScript动态调整元素的位置来实现垂直居中。
const element = document.querySelector('.child');
element.style.position = 'absolute';
element.style.top = `${(window.innerHeight - element.offsetHeight) / 2}px`;
这些方法在不同场景中有不同的优劣，根据布局的需求和兼容性，选择最合适的方案才能高效地实现垂直居中。