鸭梨公共文档

主题

01. CSS 水平居中的实现方法 ​

1. 行内/行内块元素居中 ​

使用 text-align: center 在父容器上实现水平居中。此方法适用于：

  • 文本内容
  • <img> 等行内元素
  • display: inline-block 元素
css
.parent {
  text-align: center;
}
.child {
  display: inline-block; /* 如果子元素是块级元素 */
}

2. 块级元素居中（已知宽度） ​

使用 margin: 0 auto 配合固定宽度：

css
.block-element {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

或简写：

css
.block-element {
  width: 300px;
  margin: 0 auto;
}

3. Flexbox 布局 ​

现代浏览器推荐方案，通过弹性盒模型实现：

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

支持多种排列方式：

  • center: 居中排列
  • space-between: 两端对齐
  • space-around: 等间距排列

4. Grid 布局 ​

CSS Grid 的居中方案：

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

或更精确控制：

css
.container {
  display: grid;
  justify-content: center;
}

5. 绝对定位方案 ​

适用于需要脱离文档流的元素：

css
.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

6. 表格布局方案 ​

通过表格特性实现居中：

css
.element {
  display: table;
  margin: 0 auto;
}

7. 视口单位居中 ​

结合视口单位和 transform：

css
.center-element {
  position: fixed;
  left: 50vw;
  transform: translateX(-50%);
}

方法对比表 ​

选择建议 ​

  1. 简单行内内容优先使用 text-align
  2. 已知宽度的块元素使用 margin: auto
  3. 复杂布局推荐 Flexbox/Grid
  4. 特殊定位需求使用绝对定位方案

各浏览器支持情况：

  • Flexbox: IE11+ (部分属性需要前缀)
  • Grid: 现代浏览器全面支持
  • 传统方法: 全浏览器兼容

当需要同时处理垂直居中时，推荐组合使用：

css
.container {
  display: flex;
  justify-content: center; /* 水平 */
  align-items: center;     /* 垂直 */
}