CSS 垂直居中：6 种常用方法详解

垂直居中：6 种常用方法详解

垂直居中是网页设计中常见的布局需求，本文将介绍 6 种常用的 CSS 垂直居中方法，并附带示例代码，帮助您轻松实现元素的垂直居中效果。

1. 使用 Flexbox

将容器设置为 display: flex，然后使用 align-items 和 justify-content 属性来居中元素。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

2. 使用表格布局

将元素放在一个表格单元格中，并将单元格的 vertical-align 属性设置为 middle。

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

3. 使用 position 和 transform

将元素的 position 属性设置为 absolute 或 fixed，然后使用 transform 属性和 translate() 方法来居中元素。

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 使用 line-height

将元素的 line-height 属性设置为容器的高度，然后将元素的 display 属性设置为 inline-block，以实现文字或图标的垂直居中。

.container {
  line-height: 100px; /* 容器高度 */
}

.element {
  display: inline-block;
  vertical-align: middle;
}

5. 使用 CSS Grid

将容器设置为 display: grid，然后使用 grid-template-rows 和 grid-template-columns 属性来定义网格布局，并使用 justify-content 和 align-items 属性来居中元素。

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
}

6. 使用 JavaScript

使用 JavaScript 计算元素和容器的高度，并通过设置元素的 margin-top 和 margin-bottom 来实现垂直居中。

const element = document.querySelector('.element');
const container = document.querySelector('.container');

element.style.marginTop = (container.clientHeight - element.clientHeight) / 2 + 'px';

注意： 以上方法各有优缺点，请根据实际情况选择最适合的方法。