最常用的方法

对于单行文本，最推荐、最简洁的方法是使用 line-height。

.center-text {
  text-align: center; /* 文本居中对齐 */
  line-height: 40px;  /* 行高等于容器高度 */
  height: 40px;       /* 容器有明确高度 */
}

对于块级元素（如 <p>, <div>, <h1> 等），最常用的是使用 margin: auto。

.center-block {
  width: 50%; /* 必须有宽度 */
  margin: 20px auto; /* 上下边距20px，左右边距自动（实现水平居中） */
  border: 1px solid #ccc;
}

水平居中

这是最常见的需求,主要有以下几种方法：

居中 (针对单行文本)

适用场景：<span>, <a>, <strong> 等行内元素，或者设置了 display: inline-block 的元素。

方法：使用 text-align: center

这是最简单直接的方法,它会将其所有后代行内内容都居中。

<div class="parent">
  <p>这段文字会水平居中显示。</p>
  <span>这个span也会居中。</span>
</div>

.parent {
  width: 300px;
  height: 100px;
  border: 2px solid steelblue;
  /* 关键代码 */
  text-align: center; 
}

注意：text-align 只对行内内容有效，对块级元素（如另一个 <div>）本身无效。

块级元素居中 (适用于已知宽度的元素)

适用场景：一个 <div> 或 <p> 想要在其父容器中水平居中。

方法：使用 margin: 0 auto

这是最经典、最标准的块级元素水平居中方法。

关键点：

1. 元素必须是块级元素（display: block 或 inline-block 等）。
2. 元素必须有一个明确的宽度（width 属性）。

<div class="grandparent">
  <div class="child">我会在父容器中水平居中</div>
</div>

.grandparent {
  width: 400px;
  height: 200px;
  border: 2px solid red;
}
.child {
  width: 200px; /* 必须设置宽度 */
  background-color: lightblue;
  /* 关键代码 */
  margin: 20px auto; /* 上下边距20px，左右边距自动实现居中 */
}

使用 Flexbox (现代、强大的方法)

Flexbox 是 CSS3 布局的神器，可以实现各种复杂的居中，并且代码更简洁、直观。

适用场景：任何需要居中的元素，无论是单行文本、块级元素还是多个元素。

方法：在父容器上使用 Flexbox 布局

<div class="flex-parent">
  <div class="flex-child">我水平居中了</div>
  <div class="flex-child">我也水平居中了</div>
</div>

.flex-parent {
  display: flex; /* 关键：启用 Flexbox 布局 */
  justify-content: center; /* 关键：主轴（水平方向）居中对齐 */
  align-items: center; /* 可选：交叉轴（垂直方向）也居中 */
  width: 400px;
  height: 200px;
  border: 2px solid green;
}
.flex-child {
  padding: 10px;
  margin: 5px;
  background-color: lightgreen;
}

优点：

• 代码简洁,无需设置 margin 或 width（子元素宽度由内容决定）。
• 可以轻松实现多行、多列内容的居中。
• 同时处理水平和垂直居中非常方便。

垂直居中

垂直居中比水平居中稍微复杂一些。

单行文本垂直居中

适用场景：一个容器高度固定，里面只有一行文本。

方法：使用 line-height

将 line-height 的值设置为与容器高度 height 相等。

<div class="vertical-single">
  这是一行垂直居中的文本。
</div>

.vertical-single {
  width: 300px;
  height: 100px;
  line-height: 100px; /* 关键：行高等于容器高度 */
  border: 2px solid purple;
  text-align: center; /* 如果同时需要水平居中 */
}

注意：此方法只对单行文本有效，多行文本会导致行间距过大。

使用 Flexbox (推荐)

这是目前最推荐、最灵活的垂直居中方法，无论内容是一行还是多行，单个还是多个元素都适用。

方法：在父容器上使用 Flexbox 布局

<div class="flex-parent-vertical">
  <p>我是多行文本。</p>
  <p>我也能完美垂直居中。</p>
</div>

.flex-parent-vertical {
  display: flex; /* 启用 Flexbox */
  align-items: center; /* 关键：交叉轴（垂直方向）居中 */
  justify-content: center; /* 通常也配合水平居中 */
  width: 400px;
  height: 300px;
  border: 2px solid orange;
}

使用 Grid (现代、优雅的方法)

CSS Grid 是另一个强大的布局工具，实现垂直居中同样非常简单。

方法：在父容器上使用 Grid 布局

<div class="grid-parent">
  <div class="grid-child">我通过Grid垂直居中了</div>
</div>

.grid-parent {
  display: grid; /* 启用 Grid 布局 */
  /* 关键：将内容放置在网格的中心 */
  place-items: center; /* 是 align-items: center; 和 justify-items: center; 的简写 */
  width: 400px;
  height: 300px;
  border: 2px solid teal;
}

同时水平和垂直居中

这是最常见的需求之一,比如模态框。

Flexbox (最推荐)

.flex-center {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  width: 100vw; /* 视口宽度 */
  height: 100vh; /* 视口高度 */
  background-color: #f0f0f0;
}

Grid (同样优雅)

.grid-center {
  display: grid;
  place-items: center; /* 一行搞定 */
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
}

绝对定位 + Transform (经典方法)

在不支持 Flexbox/Grid 的旧浏览器中，这是最可靠的方案。

关键点：

1. 父容器 position: relative。
2. 子元素 position: absolute。
3. 子元素 top: 50%; left: 50% 将其左上角移动到父容器中心。
4. 子元素 transform: translate(-50%, -50%) 将其自身向左、向上移动50%的宽高，从而实现真正的中心对齐。

.parent {
  position: relative;
  width: 400px;
  height: 400px;
  border: 2px solid black;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 关键：通过transform回退自身 */
  transform: translate(-50%, -50%); 
  background-color: coral;
  padding: 20px;
}

总结与最佳实践

如何选择？

1. 单行文本水平居中：直接用 text-align: center。
2. 块级元素水平居中：用 margin: 0 auto 或 Flexbox/Grid。
3. 任何现代布局（尤其是同时水平和垂直居中）：首选 Flexbox 或 Grid，它们是未来趋势，代码更简洁，功能更强大，能解决绝大多数布局问题。