CSS 对齐

CSS 对齐技术

控制元素的定位和布局

CSS 提供了各种技术，用于在容器（containers）内或相对于视口（viewport）水平和垂直对齐元素。像 Flexbox 和 Grid 这样的现代 CSS 布局方法（layout methods）提供了强大而灵活的对齐功能。

本章主要关注块级元素（block-level elements）的水平对齐技术。关于文本对齐（元素内部），请参阅 text-align 等属性（properties）。

使用 margin: auto 居中块级元素

在包含块（containing block）内水平居中块级元素经典且最常见的方法是：

1. 指定元素的 width（小于其容器的宽度）。
2. 将 margin-left 和 margin-right 都设置为 auto。

当 margin-left 和 margin-right 都设置为 auto 时，浏览器会在左右外边距之间平均分配可用的水平空间，从而有效地使元素居中。

.center-block {
  width: 70%; /* 或任何小于 100% 的宽度 */
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;
  padding: 1em;
}

注意：这仅适用于明确定义了 width 的块级元素（例如 <div>、<p>、<section>）。它不能直接作用于 inline、inline-block 或浮动元素。

使用 Flexbox 对齐

Flexbox 是一种一维布局模型（one-dimensional layout model），旨在分配空间并在容器内对齐项目（items）。它沿主轴（main axis）和交叉轴（cross axis）都提供了强大的对齐功能。

要在 Flex 容器（display: flex）内水平对齐项目（即 Flex 项目），请在容器上使用 justify-content 属性。

.flex-container {
  display: flex;
  border: 1px solid grey;
  padding: 10px;

  /* 水平对齐选项： */
  /* justify-content: flex-start; */ /* 默认值：项目与起始线对齐 */
  /* justify-content: flex-end; */   /* 项目与结束线对齐 */
  justify-content: center;     /* 项目居中对齐 */
  /* justify-content: space-between; */ /* 第一个项目在起始线，最后一个在结束线，空白空间分布在项目之间 */
  /* justify-content: space-around; */  /* 空白空间分布在项目周围 */
  /* justify-content: space-evenly; */  /* 空白空间均匀分布在项目之间和周围 */
}

.flex-item {
  background-color: lightcoral;
  padding: 1em;
  margin: 5px; /* 添加一些外边距用于视觉分隔 */
}

Flexbox 还提供用于垂直对齐（沿交叉轴）的 align-items 属性，以及用于对齐单个 Flex 项目的 align-self 属性。

使用 CSS Grid 对齐

CSS Grid Layout 是一种二维布局系统（two-dimensional layout system），用于网页排版，允许你使用行和列创建复杂的布局。Grid 也提供了全面的对齐功能。

要在网格项目在其网格单元格（grid cells）内水平对齐，请在网格容器上使用 justify-items，或在单个网格项目上使用 justify-self。

要将整个网格结构在容器内对齐（如果网格轨道未填满容器），请在网格容器上使用 justify-content。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 1px solid grey;
  padding: 10px;
  height: 150px; /* 为容器设置一些高度 */

  /* 在网格单元格内对齐项目（水平方向） */
  /* justify-items: start; */
  /* justify-items: end; */
  justify-items: center;
  /* justify-items: stretch; */ /* 默认值 */

  /* 在容器内对齐整个网格结构（水平方向） */
  /* justify-content: start; */
  /* justify-content: end; */
  /* justify-content: center; */
}

.grid-item {
  background-color: lightgreen;
  padding: 1em;
}

.grid-item-specific {
  justify-self: end; /* 覆盖容器的 justify-items 设置，仅针对此特定项目 */
  background-color: gold;
}

Grid 还提供 align-items / align-self 用于在单元格内进行垂直对齐，以及 align-content 用于垂直对齐网格结构。

此外，可以在网格项目上使用 margin: auto，以在其网格区域（grid area）内居中，类似于块级元素。

较旧的对齐方法（谨慎使用）

虽然 Flexbox 和 Grid 是布局的首选，但仍然存在一些较旧的方法：

使用 position: absolute：

绝对定位将元素从正常文档流（normal document flow）中移除。你可以将其相对于其最近的定位祖先（nearest positioned ancestor，即 position 属性不是 static 的祖先）进行对齐。

.parent-container {
  position: relative; /* 建立定位上下文 */
  height: 200px;
  border: 1px dashed blue;
}

.positioned-right {
  position: absolute;
  right: 0;
  top: 20px;
  width: 150px;
  background-color: lightsalmon;
  padding: 1em;
}

谨慎使用绝对定位，因为它可能导致元素重叠（overlapping elements），并且可能不适用于主要的页面布局。

使用 float：

float 属性历史上曾用于创建多列布局（multi-column layouts），但现在强烈不推荐这种做法。Flexbox 和 Grid 在布局方面远优于 float。

float 主要用于允许文本（及其他行内内容）环绕（wrap around）一个元素，通常是图片。

.image-left {
  float: left;
  width: 100px;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

/* 需要使用 clearfix 或特定的容器处理 */

使用 float 进行布局通常需要处理清除浮动（clearing floats），这与现代布局技术相比增加了复杂性。

总结

在现代网页开发中，优先使用 Flexbox 和 Grid 进行布局和对齐。对于简单的块级元素居中，使用 margin: auto。将 position: absolute 保留用于特定的定位需求，例如覆盖层（overlays），而 float 主要用于其最初设计目的——使文本环绕元素。