CSS实现垂直居中的常用方法

在前端开发中，元素垂直居中是一个高频需求，不同场景下适合的方案也有所区别。本文将介绍几种主流的CSS垂直居中实现方式，覆盖不同布局场景的使用需求。

一、Flex布局实现垂直居中

Flex布局是目前最推荐使用的垂直居中方案，兼容性覆盖绝大多数现代浏览器，代码简洁且适配性高。核心思路是通过设置父容器为Flex布局，再通过属性控制子元素垂直方向的对齐方式。

/* 父容器样式 */
.parent {
  display: flex;
  /* 垂直方向居中对齐 */
  align-items: center;
  /* 可选：如果需要同时水平居中，添加 justify-content: center; */
  /* justify-content: center; */
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
}

/* 子元素样式 */
.child {
  width: 100px;
  height: 50px;
  background-color: #409eff;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

这种方式的优势是无需知道子元素的具体尺寸，即使子元素尺寸动态变化，也能始终保持垂直居中，非常适合未知尺寸元素的布局场景。

二、Grid布局实现垂直居中

Grid布局是比Flex更强大的二维布局方案，实现垂直居中的代码更加简洁，同样支持未知尺寸元素。

/* 父容器样式 */
.parent {
  display: grid;
  /* 垂直方向居中对齐 */
  align-items: center;
  /* 可选：同时水平居中添加 justify-items: center; */
  /* justify-items: center; */
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
}

/* 子元素样式 */
.child {
  width: 100px;
  height: 50px;
  background-color: #67c23a;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

Grid布局的align-items属性作用与Flex布局一致，同样可以实现子元素的垂直居中，适合已经使用Grid布局的页面场景。

三、定位+transform实现垂直居中

如果项目需要兼容不支持Flex和Grid的旧浏览器，可以使用定位结合transform的方案，这种方式同样不需要知道子元素的固定尺寸。

/* 父容器样式，需要设置定位上下文 */
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
}

/* 子元素样式 */
.child {
  position: absolute;
  /* 先向下移动父容器高度的50% */
  top: 50%;
  /* 再向上移动自身高度的50%，实现垂直居中 */
  transform: translateY(-50%);
  /* 可选：同时水平居中添加 left: 50%; transform: translate(-50%, -50%); */
  /* left: 50%;
  transform: translate(-50%, -50%); */
  width: 100px;
  height: 50px;
  background-color: #e6a23c;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

这里的top:50%是让子元素的上边缘对齐父容器垂直方向的中点，再通过translateY(-50%)将子元素向上移动自身高度的一半，从而实现整体垂直居中。

四、定位+负margin实现垂直居中

这种方式需要知道子元素的固定高度，适合子元素尺寸固定的场景，兼容性也比较好。

/* 父容器样式 */
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
}

/* 子元素样式，需要已知固定高度 */
.child {
  position: absolute;
  top: 50%;
  /* 子元素高度的一半，向上负偏移 */
  margin-top: -25px;
  width: 100px;
  height: 50px;
  background-color: #f56c6c;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

这种方式的局限性在于必须提前知道子元素的高度，如果子元素高度发生变化，需要同步修改margin-top的值，不如前面几种方案灵活。

五、line-height实现单行文本垂直居中

如果是单行文本元素的垂直居中，不需要复杂布局，直接设置line-height等于父容器高度即可，是最简单的实现方式。

/* 父容器样式 */
.parent {
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
}

/* 单行文本子元素样式 */
.child {
  /* line-height等于父容器高度，实现单行文本垂直居中 */
  line-height: 200px;
  text-align: center;
  color: #333;
}

这种方式仅适用于单行文本场景，如果文本内容换行，垂直居中效果会失效，不适用于多行文本或者块级元素。

方案选择建议

• 现代浏览器项目优先选择Flex布局，代码简洁适配性高
• 已经使用Grid布局的页面，直接用Grid的align-items属性即可
• 需要兼容旧浏览器且子元素尺寸未知，选择定位+transform方案
• 子元素尺寸固定且需要兼容旧浏览器，可选择定位+负margin方案
• 单行文本垂直居中直接使用line-height方案

CSS垂直居中Flex布局Grid布局定位居中line-height居中