以下是CSS实现元素垂直居中的主要方法，综合了多种技术方案：

以下是CSS实现元素垂直居中的主要方法，综合了多种技术方案：

一、Flexbox布局（现代推荐方案）

.parent {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中（可选） */ }

特点：代码简洁、响应式友好、无需知道子元素尺寸

二、Grid布局（单属性方案）

.parent { display: grid;
place-items: center; /* 同时控制水平和垂直居中 */ }

优势：单行代码实现，适合复杂布局场景

三、绝对定位 + Transform

 

.parent { position: relative; }

.child { position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%); }

适用场景：未知子元素尺寸时使用，兼容IE9

四、绝对定位 + 负边距

.child { position: absolute;

top: 50%; left: 50%;

margin-top: -50px; /* 子元素高度的一半 */

margin-left: -50px; /* 子元素宽度的一半 */ }

要求：需已知子元素精确尺寸

五、Table-Cell方案

.parent { display: table-cell; vertical-align: middle; }

.child { display: inline-block; }

优势：兼容老旧浏览器

六、Line-Height方案（单行文本）

.parent {

height: 100px;

line-height: 100px; /* 值等于容器高度 */ }

限制：仅适用于单行文本内容

七、Writing-Mode方案

.parent {

writing-mode: vertical-lr;

text-align: center; }

.child {

writing-mode: horizontal-tb;

display: inline-block; }

特殊场景：实现文字竖向排版时的居中

八、Calc计算方案

.child {

position: absolute;

top: calc(50% - 50px); /* 50%减去元素高度一半 */

left: calc(50% - 50px); /* 50%减去元素宽度一半 */ }

注意：需预知元素尺寸17

各方案选择建议：

1. 现代项目优先使用Flexbox或Grid
2. 兼容旧浏览器考虑Table-Cell或绝对定位
3. 动态内容推荐Transform方案47
4. 文本内容可选用Line-Height