css-垂直居中基本方法

在HTML/CSS中实现垂直居中需根据元素类型（行内、块级）和布局场景选择合适方法。以下按元素类型分类整理常用方案，并附适用场景说明：

📌 一、行内元素（Inline/Inline-block）

适用于 <span>、<a>、<img> 等行内或行内块元素。

1. 单行文本/元素
   方法：设置 line-height 等于容器高度。
   原理：行高与容器高度一致时，文本垂直居中。
   代码：

   .container {
     height: 100px; /* 固定高度 */
     line-height: 100px; /* 等于高度 */
   }
   

   注意：仅适用于单行内容，多行文本会溢出。

2. 多行文本/元素
   方法：使用伪元素 + vertical-align: middle。
   原理：伪元素撑满高度，子元素与之垂直对齐。
   代码：

   .container::before {
     content: '';
     height: 100%;
     display: inline-block;
     vertical-align: middle;
   }
   .child {
     display: inline-block;
     vertical-align: middle;
   }
   

   注意：父元素需为 inline-block 或 block。

📦 二、块级元素（Block）

适用于 <div>、<p> 等块级元素，分已知高度和未知高度两种情况。

✅ 已知高度

1. 绝对定位 + 负边距
   方法：top: 50% + 负 margin-top（值为高度一半）。
   代码：

   .parent {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%;
     height: 100px;
     margin-top: -50px; /* 高度一半的负值 */
   }
   

   适用场景：固定高度元素，兼容性好（IE8+）。

2. 绝对定位 + calc()
   方法：用 calc(50% - 高度/2) 精确定位。
   代码：

   .child {
     position: absolute;
     top: calc(50% - 50px); /* 50px为高度一半 */
   }
   

❓ 未知高度

1. 绝对定位 + transform
   方法：top: 50% + transform: translateY(-50%)。
   原理：translateY(-50%) 将元素上移自身高度的50%。
   代码：

   .child {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }
   

   注意：父元素需设置 position: relative。

2. Flexbox 布局
   方法：父容器设置 display: flex + align-items: center。
   代码：

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

   优势：简单、响应式，支持多行内容。

3. Grid 布局
   方法：父容器设置 display: grid + place-items: center。
   代码：

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

   适用场景：现代浏览器（IE不支持）。

4. 表格布局模拟
   方法：父元素 display: table-cell + vertical-align: middle。
   代码：

   .parent {
     display: table-cell;
     vertical-align: middle;
     height: 300px; /* 需指定高度 */
   }
   

   注意：父元素不可设置 float 或绝对定位。

🔍 三、特殊场景补充

• 水平垂直居中：
  • Flex/Grid：justify-content: center + align-items: center（Flex）或 place-items: center（Grid）。
  • 绝对定位：top: 50%; left: 50%; transform: translate(-50%, -50%)。
• 浮动元素居中：建议改用 Flex/Grid 布局，避免 float 导致的布局问题。

💎 总结建议

优先选择 Flexbox：代码简洁、响应式强，是当前主流方案。若需兼容旧浏览器（如 IE9），可结合表格布局或绝对定位实现。