定位元素的居中技巧

水平居中

行内元素水平居中直接对父元素设置text-align: center即可。这种方法适用于span、a、img等行内元素。

.parent {
  text-align: center;
}

块级元素水平居中需要设置宽度并使用margin: 0 auto。注意元素必须是块级元素且宽度不能是auto。

.box {
  width: 200px;
  margin: 0 auto;
}

Flex布局实现水平居中更为灵活，只需在父容器设置justify-content: center。

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

垂直居中

单行文本垂直居中可以使用line-height等于容器高度。

.container {
  height: 100px;
  line-height: 100px;
}

绝对定位结合负边距是传统实现方式，需要知道元素具体尺寸。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 50px;
  margin-top: -25px;
}

Flex布局的垂直居中只需设置align-items: center。

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

绝对居中

绝对定位结合transform不需要知道元素尺寸，是最常用的现代方案。

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

Grid布局提供了更简洁的绝对居中方案，代码量最少。

.container {
  display: grid;
  place-items: center;
}

特殊场景处理

浮动元素居中需要额外处理，常见方案是外层包裹相对定位容器。

.wrapper {
  position: relative;
  float: left;
  left: 50%;
}
.inner {
  position: relative;
  left: -50%;
}

表格单元格内容居中可以利用vertical-align属性。

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

响应式居中技巧

视窗单位实现的全屏居中方案，适合弹窗等场景。

.modal {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

CSS变量结合calc()实现动态居中。

:root {
  --element-width: 300px;
}
.element {
  width: var(--element-width);
  margin-left: calc(50% - var(--element-width)/2);
}

多元素居中排列

Flex布局处理多个子元素居中排列时，可以结合flex-direction和flex-wrap。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Grid布局处理多元素居中更为直观，通过grid-template-columns控制列数。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  place-items: center;
  gap: 20px;
}

浏览器兼容方案

考虑到旧版浏览器支持时，可以结合多种技术实现降级方案。

/* 现代浏览器 */
@supports (display: grid) {
  .container {
    display: grid;
    place-items: center;
  }
}

/* 传统浏览器 */
@supports not (display: grid) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

IE10/11需要特殊处理transform的居中方案。

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* IE10/11备用方案 */
  margin-left: -50px; /* 元素宽度的一半 */
  margin-top: -50px; /* 元素高度的一半 */
}