CSS 对齐

对齐是网页排版的基本功：文本靠左靠右、元素水平居中、内容垂直居中……CSS 提供了多种手段，选择合适的方案能让页面在不同情况下都保持整齐。本节讲师为你梳理水平与垂直对齐的常用套路。

文本的水平对齐

想让文字居中或靠右，用 text-align 即可，注意它只作用于行内内容：

.center  { text-align: center; }   /* 文本水平居中 */
.right   { text-align: right; }    /* 文本水平靠右 */
.justify { text-align: justify; }  /* 两端对齐 */

<p class="center">这段文字水平居中</p>

运行效果：段落里的每一行文字都居中显示。

块级元素水平居中

对 div 这类块级元素，text-align 无效，要用 margin 自动留白：

.block-center {
  width: 300px;        /* 必须设置宽度 */
  margin: 0 auto;      /* 左右外边距自动平分，实现居中 */
}

原理：元素设置了固定宽度后，浏览器把剩余空间平均分给左右外边距，元素就被推到正中间。

用 position 实现绝对定位对齐

需要把元素钉在父容器某个位置时，可以配合定位实现左右对齐：

.parent { position: relative; }               /* 父容器作为定位基准 */
.child-right {
  position: absolute;
  right: 0;                                    /* 贴住父容器右边缘 */
}
.child-center {
  position: absolute;
  left: 50%;                                   /* 先移动一半 */
  transform: translateX(-50%);                 /* 再往回拉自身宽度的一半 */
}

运行效果：.child-right 紧贴父容器右边缘；.child-center 实现真正的水平居中，不依赖元素自身宽度。

用 line-height 做单行垂直居中

文字在固定高度的容器里垂直居中，最简单的方法是让行高等于容器高度：

.banner {
  height: 60px;
  line-height: 60px;   /* 行高与高度一致 */
  text-align: center;
  background: #f5f5f5;
}

<div class="banner">导航标题垂直居中</div>

运行效果：单行文本在 60 像素高的容器内上下居中；文字换行变成多行时，此方法会失效。

用 Flex 一站式居中

现代布局首选 Flex：一个容器同时搞定水平与垂直居中，无需计算宽度和行高：

.flex-center {
  display: flex;
  justify-content: center;  /* 主轴（水平）居中 */
  align-items: center;      /* 交叉轴（垂直）居中 */
  height: 150px;
}

<div class="flex-center">
  <button>提交</button>
</div>

运行效果：按钮在容器内既水平居中又垂直居中，且不关心内容的宽高，是当前最推荐的对齐方式。

小结

文本居中用 text-align，块元素居中用 margin:auto，绝对定位配 transform 可做精确居中，单行文字用 line-height，而 Flex 的 justify-content 与 align-items 能一站式解决水平与垂直对齐。按场景选对方法，页面就整齐了。