对齐与间距（优化布局，提升页面整洁度）

15.1 水平对齐

text-align（文本对齐）

定义：设置文本内容的水平对齐方式。

语法：

css

元素 {
  text-align: 对齐方式;
}

常用值：

left：左对齐
center：居中对齐
right：右对齐
justify：两端对齐

示例：

css

.center-text {
  text-align: center;
}

justify-content（Flex水平对齐）

定义：设置Flex项目在主轴上的对齐方式。

语法：

css

容器 {
  justify-content: 对齐方式;
}

常用值：

flex-start：左对齐
center：居中对齐
flex-end：右对齐
space-between：两端对齐
space-around：均匀分布

示例：

css

.flex-center {
  display: flex;
  justify-content: center;
}

margin: 0 auto（块级元素居中）

定义：通过设置左右外边距为auto，实现块级元素水平居中。

语法：

css

块级元素 {
  margin: 0 auto;
  width: 具体宽度;
}

示例：

css

.center-box {
  width: 800px;
  margin: 0 auto;
}

15.2 垂直对齐

vertical-align（行内元素垂直对齐）

定义：设置行内元素的垂直对齐方式。

语法：

css

行内元素 {
  vertical-align: 对齐方式;
}

常用值：

top：顶部对齐
middle：居中对齐
bottom：底部对齐
baseline：基线对齐（默认值）

示例：

css

.middle-align {
  vertical-align: middle;
}

align-items（Flex垂直对齐）

定义：设置Flex项目在交叉轴上的对齐方式。

语法：

css

容器 {
  align-items: 对齐方式;
}

常用值：

flex-start：顶部对齐
center：居中对齐
flex-end：底部对齐
stretch：拉伸填满

示例：

css

.vertical-center {
  display: flex;
  align-items: center;
}

align-self（单独垂直对齐）

定义：单独控制某个Flex项目的垂直对齐方式。

语法：

css

项目 {
  align-self: 对齐方式;
}

示例：

css

.special-item {
  align-self: center;
}

15.3 元素间距

margin（外边距）

定义：设置元素与其他元素之间的间距。

语法：

css

元素 {
  margin: 上 右 下 左;
}

示例：

css

.box {
  margin: 20px;           /* 四边统一 */
  margin: 20px 30px;      /* 上下 左右 */
  margin: 10px 20px 30px; /* 上 左右 下 */
}

padding（内边距）

定义：设置元素内容与边框之间的间距。

语法：

css

元素 {
  padding: 上 右 下 左;
}

示例：

css

.box {
  padding: 20px;          /* 四边统一 */
  padding: 20px 30px;     /* 上下 左右 */
}

gap（Flex/Grid专用间距）

定义：设置Flex或Grid项目之间的间距。

语法：

css

容器 {
  gap: 行间距 列间距;
}

示例：

css

.flex-container {
  display: flex;
  gap: 20px;
}

.grid-container {
  display: grid;
  gap: 20px 30px;
}

15.4 新手避坑：垂直居中的5种方法

方法1：Flex布局（推荐）

css

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

方法2：绝对定位 + transform

css

.absolute-center {
  position: relative;
  height: 300px;
}

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

方法3：绝对定位 + margin

css

.margin-center {
  position: relative;
  height: 300px;
}

.margin-center .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

方法4：Grid布局

css

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

方法5：line-height（单行文本）

css

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

15.5 实战：实现页面元素水平垂直居中、均匀分布

实战目标

使用不同的方法实现元素的水平垂直居中和均匀分布。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS对齐与间距实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS对齐与间距实战</h1>
    
    <!-- Flex垂直居中 -->
    <section class="demo-section">
      <h2>Flex垂直居中</h2>
      <div class="flex-center">
        <div class="content">Flex居中内容</div>
      </div>
    </section>
    
    <!-- 绝对定位居中 -->
    <section class="demo-section">
      <h2>绝对定位居中</h2>
      <div class="absolute-center">
        <div class="content">绝对定位居中内容</div>
      </div>
    </section>
    
    <!-- 均匀分布 -->
    <section class="demo-section">
      <h2>均匀分布</h2>
      <div class="evenly-distributed">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目4</div>
      </div>
    </section>
  </div>
</body>
</html>

添加CSS样式：

css

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 50px 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 40px;
}

.demo-section {
  margin-bottom: 40px;
}

.demo-section h2 {
  color: #555;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
}

/* Flex垂直居中 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #e3f2fd;
  border-radius: 8px;
}

.flex-center .content {
  padding: 30px;
  background-color: #3498db;
  color: white;
  border-radius: 8px;
}

/* 绝对定位居中 */
.absolute-center {
  position: relative;
  height: 200px;
  background-color: #fff3e0;
  border-radius: 8px;
}

.absolute-center .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
  background-color: #ff9800;
  color: white;
  border-radius: 8px;
}

/* 均匀分布 */
.evenly-distributed {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  background-color: #f3e5f5;
  padding: 20px;
  border-radius: 8px;
}

.evenly-distributed .item {
  flex: 1;
  padding: 20px;
  background-color: #9c27b0;
  color: white;
  text-align: center;
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .evenly-distributed {
    flex-wrap: wrap;
  }
  
  .evenly-distributed .item {
    flex: 1 1 45%;
  }
}

运行页面：在浏览器中打开文件，观察效果

预期效果

Flex垂直居中：使用Flex布局实现完美居中
绝对定位居中：使用绝对定位和transform实现居中
均匀分布：使用Flex的space-between实现均匀分布

对齐与间距（优化布局，提升页面整洁度） ​

15.1 水平对齐 ​

text-align（文本对齐） ​

justify-content（Flex水平对齐） ​

margin: 0 auto（块级元素居中） ​

15.2 垂直对齐 ​

vertical-align（行内元素垂直对齐） ​

align-items（Flex垂直对齐） ​

align-self（单独垂直对齐） ​

15.3 元素间距 ​

margin（外边距） ​

padding（内边距） ​

gap（Flex/Grid专用间距） ​

15.4 新手避坑：垂直居中的5种方法 ​

方法1：Flex布局（推荐） ​

方法2：绝对定位 + transform ​

方法3：绝对定位 + margin ​

方法4：Grid布局 ​

方法5：line-height（单行文本） ​

15.5 实战：实现页面元素水平垂直居中、均匀分布 ​

实战目标 ​

实战步骤 ​

预期效果 ​

对齐与间距（优化布局，提升页面整洁度）

15.1 水平对齐

text-align（文本对齐）

justify-content（Flex水平对齐）

margin: 0 auto（块级元素居中）

15.2 垂直对齐

vertical-align（行内元素垂直对齐）

align-items（Flex垂直对齐）

align-self（单独垂直对齐）

15.3 元素间距

margin（外边距）

padding（内边距）

gap（Flex/Grid专用间距）

15.4 新手避坑：垂直居中的5种方法

方法1：Flex布局（推荐）

方法2：绝对定位 + transform

方法3：绝对定位 + margin

方法4：Grid布局

方法5：line-height（单行文本）

15.5 实战：实现页面元素水平垂直居中、均匀分布

实战目标

实战步骤

预期效果