前端西瓜哥的博客

CSS居中方法汇总

 1140  3 mins

CSS 实现居中的一些方法的汇总，分为水平居中和垂直居中两部分进行叙述。

演示地址

  • 水平居中：https://codepen.io/F-star/pen/KKpvVgq
  • 垂直居中：https://codepen.io/F-star/pen/YzXxWvR

水平居中

flex

给父元素设置 flex 布局。适用性广泛，除了不兼容低版本浏览器。

1
2
3
4

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

text-align: center

通过给容器元素设置 text-align: center，可以控制行内元素相对它父元素的对其方式为居中。容器元素设置该属性，该属性会传递给它的子元素。

适用于控制行内元素和文本居中。

1
2
3

.ta {
  text-align: center;
}

margin: 0 auto;

给属于块状元素的子元素的 margin-left 和 margin-right 设置 auto，就可以使其在容器内居中。

另外，如果只设置其中一个为 auto，就能实现右对齐和左对齐的效果哦。

适用于子元素为块状元素的情况。

绝对布局配合负 margin-left

简单的数学几何问题。对子元素使用绝对布局，并设置 left: 50%，让其的左侧和容器元素的中线对齐。然后我们再设置 margin-left 为子元素宽度的一半的负值，让子元素向左移动，使得子元素和容器元素的中线重合，达到居中的效果。

如果父元素的宽度已知，你也可以直接计算出 left 值，而不需要使用 margin-left。另外记得给容器元素设置相对定位，以作为子元素的参考元素。

只能用于子元素宽度固定的情况，因为需要计算 margin-left 的值。

1
2
3
4
5
6

.absolute {
  position: absolute;
  left: 50%;
  margin-left: -40px; /* - width / 2 */
  width: 80px;
}

绝对布局配合 transform

原理同上一个方案，但是适用性更广，可以用于子元素宽度不固定的情况。因为 transform 的百分比是相对于子元素的，而 margin-left 的百分比是相对于容器元素的。

1
2
3
4
5

.transform {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

垂直居中

flex

flex 布局真好使。

1
2
3
4

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

line-height

常用的居中方案：通过设置容器元素的行高为容器的高度，我们可以控制行内子元素或文本元素的行高，从而达到垂直居中的效果。

只能对行内子元素生效，且容器元素需要高度固定。

1
2
3

.lh {
  line-height: 100px; /* 值为容器元素的高度 */
}

vertical-align: middle;

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。修改容器元素的 diaplay 属性并添加 '' 即可

缺点是要修改父元素的 display 属性，可能会因此导致一些样式不生效。

1
2
3
4

.container {
  display: table-cell;
  vertical-align: middle;
}

绝对布局配合负 margin-top

原理同水平居中的 “绝对布局配合负 margin-left”，只是换了个方向。

1
2
3
4
5

.absolute {
  position: absolute;
  top: 50%;
  margin-top: -25px; /* -高度 / 2 */
}

绝对布局配合 transform

同样，原理同水平居中的 “绝对布局配合 transform”：

1
2
3
4
5

.transform {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

纯手动计算

最后一种方法就是纯粹使用手工计算到左侧和顶部的偏移距离，来实现居中的效果。可以用上 margin, padding, left, top, transform 等会对元素造成位移效果的属性。

缺点很明显，需要进行计算，当父元素或子元素的宽高发生变化时，都要重新进行计算，所以很少使用

相关资料

See Also: