CSS实现垂直居中的几种实用方法（实用技巧版）

在网页布局中，让元素垂直居中是个常见需求。比如做登录框、弹窗提示、按钮图标对齐，经常会遇到内容上下不对齐的情况。虽然看起来简单，但不同场景下实现方式各有讲究。

使用 Flexbox（推荐）

Flex 弹性布局是目前最方便的方式，兼容性也足够好。只需要给父容器设置 display: flex 和 align-items: center 就能轻松实现垂直居中。

<div class="container">
  <p>我是居中的文字</p>
</div>

.container {
  display: flex;
  align-items: center;
  height: 200px; /* 必须有高度 */
}

用绝对定位 + transform

当父元素是相对定位，子元素使用绝对定位时，可以配合 top: 50% 和 transform 向上移动自身高度的一半来居中。

<div class="parent">
  <div class="child">居中内容</div>
</div>

.parent {
  position: relative;
  height: 200px;
}

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

行内元素用 line-height

如果是单行文本，比如按钮或导航栏里的字，直接设置 line-height 等于容器高度就行。简单粗暴，适合小范围调整。

<div class="btn">确认</div>

.btn {
  height: 40px;
  line-height: 40px;
  text-align: center;
}

Grid 布局也能搞定

CSS Grid 是现代布局的另一利器。通过 place-items 或 align-self 都可以快速居中。

.container {
  display: grid;
  place-items: center;
  height: 200px;
}

这种方法适合复杂布局中的局部居中，尤其是需要同时水平和垂直居中的时候。

老派方法：vertical-align + table-cell

在没有 Flex 的年代，有人会把父元素设成表格单元格形式，再用 vertical-align: middle 实现居中。

.parent {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
  width: 200px;
}

虽然有效，但结构限制大，现在用得少了。

每种方法都有适用场景。日常开发中，优先考虑 Flex，简单直观；老项目兼容要求高时可选 line-height 或定位方案。动手试试看，下次写页面再也不怕对不齐了。