CSS 对齐与居中

对齐是 CSS 新手最头疼的问题之一，尤其是垂直居中，各种方案五花八门。其实对齐分场景，每种场景用对方法，就能轻松搞定。

水平对齐

水平对齐最简单，三种场景三种写法。

/* 文字水平居中 */
.text {
  text-align: center;
}

/* 块级元素水平居中 */
.block {
  margin: 0 auto;
  width: 300px;
}

/* flex 容器里的项目居中 */
.flex-box {
  display: flex;
  justify-content: center;
}

text-align: center 让文字居中，只对行内内容有效。margin: 0 auto 让块级元素居中，前提是元素要有确定宽度。flex 的 justify-content: center 让子元素水平居中。

垂直对齐，单行文字

单行文字垂直居中，用 line-height 等于容器高度的小技巧。

.bar {
  height: 40px;
  line-height: 40px;
}

把 line-height 设置成和 height 一样，文字就在垂直方向居中了。适合按钮、标签栏、小横条。注意只对单行文字有效，多行文字会溢出。

垂直对齐，flex 方案

现代布局里垂直居中几乎都用 flex。

.center-box {
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}

align-items: center 让子元素垂直居中，justify-content: center 水平居中。两个一起用，就是”完全居中”。这是 Flexbox 的核心能力。

定位加 transform

老牌方案，配合定位和位移。

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

top: 50% 让元素顶部到容器一半，transform: translate(-50%, -50%) 把元素往左上移自身一半。元素宽高不确定也能居中，适合弹窗、浮层这类绝对定位的场景。要注意 transform 不影响文档流，元素移动后周围布局不变。

表格单元格居中

表格和 grid 布局里，text-align 和 vertical-align 配合。

td {
  text-align: center;
  vertical-align: middle;
}

vertical-align: middle 让单元格内容垂直居中，text-align: center 水平居中。数据表格的单元格基本都是这么居中的。

场景对照表

小结

对齐没有万能方案，按场景选。水平用 text-align、margin auto、flex。垂直用 line-height、flex 的 align-items、定位加 transform。flex 是现在的主流选择，掌握 flex 对齐，大部分居中问题都能解决。