CSS基础教程（二十七）布局 - 水平 & 垂直对齐：告别对齐焦虑！CSS布局终极指南：水平垂直居中竟如此简单（笑中带泪）

原创于 2025-09-11 09:40:42 发布 · 461 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

CSS基础教程专栏收录该内容

57 篇文章

订阅专栏

前言：那些年我们追过的居中元素

还记得你第一次尝试让一个div在页面中居中时的心情吗？就像追求心仪的对象一样，你小心翼翼地献上各种CSS属性：text-align: center、margin: auto、vertical-align: middle... 然而它总是对你爱答不理，要么偏左要么偏上，就是不肯待在正中央。

别担心，今天我们要一起结束这场单相思！本文将带你彻底掌握CSS布局中的水平与垂直对齐技巧，让你从此驾驭元素如臂使指。

1. 石器时代：传统对齐方式

1.1 水平对齐的远古技巧

在Flexbox和Grid出现之前，前端开发者们不得不使用各种"黑科技"来实现对齐：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 方法一：text-align大法（仅限内联元素） */
    .parent-text-align {
      text-align: center;
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    /* 方法二：margin auto魔法（块级元素水平居中） */
    .block-center {
      width: 50%;
      margin: 0 auto;
      background-color: #e0e0e0;
      padding: 20px;
    }
    
    /* 方法三：float布局（已经快入土了） */
    .float-container {
      overflow: hidden;
      background-color: #d0d0d0;
      padding: 20px;
    }
    .float-box {
      float: left;
      width: 30%;
      margin: 0 1.66%;
    }
  </style>
</head>
<body>
  <div class="parent-text-align">
    <span>我是被text-align居中的内联元素</span>
  </div>
  
  <div class="block-center">
    我是通过margin: auto居中的块级元素
  </div>
  
  <div class="float-container">
    <div class="float-box">浮动元素1</div>
    <div class="float-box">浮动元素2</div>
    <div class="float-box">浮动元素3</div>
  </div>
</body>
</html>

1.2 垂直对齐的黑暗时代

垂直对齐曾经是前端开发的噩梦，各种奇技淫巧应运而生：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 方法一：line-height暴力法（单行文本） */
    .line-height-trick {
      height: 100px;
      line-height: 100px; /* 与height相同 */
      background-color: #f0f0f0;
      text-align: center;
    }
    
    /* 方法二：table-cell魔法（已过时但有效） */
    .table-container {
      display: table;
      height: 200px;
      width: 100%;
      background-color: #e0e0e0;
    }
    .table-cell {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    
    /* 方法三：绝对定位+负边距（需要知道尺寸） */
    .relative-container {
      position: relative;
      height: 150px;
      background-color: #d0d0d0;
    }
    .absolute-center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 50px;
      margin: -25px 0 0 -50px; /* 一半高度和一半宽度的负值 */
      background-color: #ff6b6b;
    }
  </style>
</head>
<body>
  <div class="line-height-trick">
    单行文本垂直居中
  </div>
  
  <div class="table-container">
    <div class="table-cell">
      我是table-cell实现的垂直居中
    </div>
  </div>
  
  <div class="relative-container">
    <div class="absolute-center">
      绝对定位居中
    </div>
  </div>
</body>
</html>

2. 现代布局：Flexbox革命

Flexbox布局的出现彻底改变了CSS对齐的游戏规则，让我们告别了那些黑科技。

2.1 Flexbox基础概念

Flexbox的核心在于flex容器（父元素）和flex项目（子元素）的关系。只需在容器上设置display: flex，它就变成了一个flex容器，其直接子元素自动成为flex项目。

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      background-color: #f0f0f0;
      height: 200px;
      margin-bottom: 20px;
    }
    .flex-item {
      background-color: #4ecdc4;
      margin: 10px;
      padding: 20px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">项目1</div>
    <div class="flex-item">项目2</div>
    <div class="flex-item">项目3</div>
  </div>
</body>
</html>

2.2 Flexbox水平对齐秘籍

Flexbox提供了多种强大的水平对齐方式：

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      background-color: #f0f0f0;
      height: 150px;
      margin-bottom: 20px;
    }
    .flex-item {
      background-color: #4ecdc4;
      width: 100px;
      margin: 10px;
      padding: 10px;
    }
    
    /* 主轴对齐方式 */
    .justify-start { justify-content: flex-start; }
    .justify-center { justify-content: center; }
    .justify-end { justify-content: flex-end; }
    .justify-between { justify-content: space-between; }
    .justify-around { justify-content: space-around; }
    .justify-evenly { justify-content: space-evenly; }
  </style>
</head>
<body>
  <h3>flex-start (默认)</h3>
  <div class="flex-container justify-start">
    <div class="flex-item">项目1</div>
    <div class="flex-item">项目2</div>
  </div>
  
  <h3>center (水平居中)</h3>
  <div class="flex-container justify-center">
    <div class="flex-item">项目1</div>
    <div class="flex-item">项目2</div>
  </div>
  
  <h3>space-between (两端对齐)</h3>
  <div class="flex-container justify-between">
    <div class="flex-item">项目1</div>
    <div class="flex-item">项目2</div>
    <div class="flex-item">项目3</div>
  </div>
  
  <h3>space-around (周围留白)</h3>
  <div class="flex-container justify-around">
    <div class="flex-item">项目1</div>
    <div class="flex-item">项目2</div>
    <div class="flex-item">项目3</div>
  </div>
</body>
</html>

2.3 Flexbox垂直对齐秘籍

垂直对齐也不再是难题：

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      background-color: #f0f0f0;
      height: 200px;
      margin-bottom: 20px;
    }
    .flex-item {
      background-color: #4ecdc4;
      width: 100px;
      margin: 10px;
      padding: 10px;
    }
    
    /* 交叉轴对齐方式 */
    .align-stretch { align-items: stretch; }
    .align-start { align-items: flex-start; }
    .align-center { align-items: center; }
    .align-end { align-items: flex-end; }
    .align-baseline { align-items: baseline; }
  </style>
</head>
<body>
  <h3>stretch (默认，拉伸填满)</h3>
  <div class="flex-container align-stretch">
    <div class="flex-item">项目1</div>
    <div class="flex-item" style="height: auto">项目2</div>
  </div>
  
  <h3>flex-start (顶部对齐)</h3>
  <div class="flex-container align-start">
    <div class="flex-item">项目1</div>
    <div class="flex-item">项目2</div>
  </div>
  
  <h3>center (垂直居中)</h3>
  <div class="flex-container align-center">
    <div class="flex-item">项目1</div>
    <div class="flex-item">项目2</div>
  </div>
  
  <h3>baseline (基线对齐)</h3>
  <div class="flex-container align-baseline">
    <div class="flex-item" style="font-size: 16px">项目1</div>
    <div class="flex-item" style="font-size: 24px">项目2</div>
    <div class="flex-item" style="font-size: 18px">项目3</div>
  </div>
</body>
</html>

2.4 Flexbox实现完美居中

现在，实现水平垂直居中变得如此简单：

<!DOCTYPE html>
<html>
<head>
  <style>
    .perfect-center {
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center;     /* 垂直居中 */
      height: 300px;
      background-color: #f0f0f0;
    }
    .centered-content {
      background-color: #4ecdc4;
      padding: 20px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="perfect-center">
    <div class="centered-content">
      我在水平和垂直方向都居中了！<br>
      如此简单优雅！
    </div>
  </div>
</body>
</html>

3. 未来布局：Grid布局系统

CSS Grid布局是二维布局系统，比Flexbox更强大（适合复杂布局）。

3.1 Grid基础入门

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3等分列 */
      grid-gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
    }
    .grid-item {
      background-color: #4ecdc4;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
</body>
</html>

3.2 Grid对齐方式

Grid布局提供了更精细的对齐控制：

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 100px);
      grid-template-rows: repeat(2, 100px);
      height: 300px;
      background-color: #f0f0f0;
      margin-bottom: 20px;
    }
    .grid-item {
      background-color: #4ecdc4;
      padding: 10px;
    }
    
    /* 主轴对齐 */
    .justify-center { justify-content: center; }
    
    /* 交叉轴对齐 */
    .align-center { align-content: center; }
    
    /* 项目在网格单元内的对齐 */
    .item-center {
      justify-items: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <h3>网格容器居中</h3>
  <div class="grid-container justify-center align-center">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
  </div>
  
  <h3>网格项目在单元内居中</h3>
  <div class="grid-container justify-center align-center item-center">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
  </div>
</body>
</html>

3.3 Grid实现完美居中

使用Grid实现居中也非常简单：

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-perfect-center {
      display: grid;
      place-items: center; /* 同时设置justify-items和align-items */
      height: 300px;
      background-color: #f0f0f0;
    }
    .centered-content {
      background-color: #4ecdc4;
      padding: 20px;
      border-radius: 8px;
    }
    
    /* 另一种方法 */
    .grid-center-alt {
      display: grid;
      justify-content: center;
      align-content: center;
      height: 300px;
      background-color: #e0e0e0;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="grid-perfect-center">
    <div class="centered-content">
      使用Grid实现完美居中<br>
      place-items: center 真香！
    </div>
  </div>
  
  <div class="grid-center-alt">
    <div class="centered-content">
      这是另一种Grid居中方法
    </div>
  </div>
</body>
</html>

4. 实战应用：综合示例

让我们创建一个实用的卡片布局，综合运用各种对齐技巧：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合布局示例</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f8f9fa;
      padding: 20px;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .header {
      text-align: center;
      margin-bottom: 40px;
    }
    
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }
    
    .card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      
      /* Flexbox用于卡片内部布局 */
      display: flex;
      flex-direction: column;
    }
    
    .card:hover {
      transform: translateY(-5px);
    }
    
    .card-img {
      height: 200px;
      overflow: hidden;
    }
    
    .card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    .card:hover .card-img img {
      transform: scale(1.05);
    }
    
    .card-content {
      padding: 25px;
      
      /* Flexbox让内容区域扩展并推按钮到底部 */
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
    
    .card h3 {
      margin-bottom: 10px;
      font-size: 1.4rem;
    }
    
    .card p {
      margin-bottom: 20px;
      color: #666;
      flex-grow: 1; /* 推按钮到底部 */
    }
    
    .card-button {
      display: inline-block;
      background-color: #4ecdc4;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
      text-align: center;
      font-weight: 600;
      transition: background-color 0.3s ease;
    }
    
    .card-button:hover {
      background-color: #3aa89f;
    }
    
    /* 页脚样式 */
    .footer {
      margin-top: 60px;
      text-align: center;
      padding: 20px;
      background-color: #333;
      color: white;
      border-radius: 8px;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      .card-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>CSS布局实战：卡片网格</h1>
      <p>综合运用Flexbox和Grid实现响应式布局</p>
    </header>
    
    <main class="card-grid">
      <article class="card">
        <div class="card-img">
          <img src="https://via.placeholder.com/400x200/4ecdc4/ffffff?text=Flexbox魔法" alt="Flexbox示例">
        </div>
        <div class="card-content">
          <h3>Flexbox布局</h3>
          <p>一维布局模型，非常适合组件和小规模布局。提供强大的空间分配和对齐能力。</p>
          <a href="#" class="card-button">学习更多</a>
        </div>
      </article>
      
      <article class="card">
        <div class="card-img">
          <img src="https://via.placeholder.com/400x200/45b7d1/ffffff?text=Grid系统" alt="Grid示例">
        </div>
        <div class="card-content">
          <h3>Grid布局</h3>
          <p>二维布局系统，适合整个页面的宏观布局。提供行和列的精确控制。</p>
          <a href="#" class="card-button">学习更多</a>
        </div>
      </article>
      
      <article class="card">
        <div class="card-img">
          <img src="https://via.placeholder.com/400x200/96ceb4/ffffff?text=对齐大师" alt="对齐技巧">
        </div>
        <div class="card-content">
          <h3>对齐技巧</h3>
          <p>掌握justify-content、align-items、place-content等属性，成为对齐大师。</p>
          <a href="#" class="card-button">学习更多</a>
        </div>
      </article>
    </main>
    
    <footer class="footer">
      <p>© 2023 CSS布局大师课程 | 轻松掌握水平垂直对齐</p>
    </footer>
  </div>
</body>
</html>

5. 总结与最佳实践

经过本文的深入探讨，我们应该已经对CSS布局中的水平与垂直对齐有了全面理解。以下是关键要点：

根据需求选择布局技术：

- 小规模组件布局：Flexbox
- 整体页面布局：Grid
- 简单文本对齐：传统方法

记住这些万能居中公式：

/* Flexbox居中 */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid居中 */
.parent {
  display: grid;
  place-items: center;
}