参考资料

1. css div内容居中
2. CSS弹性盒子详细说明以及案例
3. CSS格式化/压缩有哪些
4. 目标伪类选择器详细说明以及案例
5. display: flex/inline-flex示例
6. Flexbox 布局有哪些高级用法？
7. 如何用添加产品图片和描述？
8. css3中设置阴影的属性是

css让div居中的几种方法

1. 使用margin: auto

• 适用于固定宽度的块级元素

• 示例：

  .center-div {
    width: 300px;
    margin: 0 auto;
  }

2. 使用Flexbox

• 现代布局方法，简单灵活

• 示例：

  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

3. 使用Grid布局

• 二维布局系统

• 示例：

  .parent {
    display: grid;
    place-items: center;
    height: 100vh;
  }

4. 使用绝对定位+transform

• 适用于未知尺寸元素

• 示例：

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

5. 使用table-cell

• 传统方法，兼容性好

• 示例：

  .parent {
    display: table;
    width: 100%;
    height: 100vh;
  }
  .center-div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }

6. 使用text-align

• 仅适用于行内/行内块元素

• 示例：

  .parent {
    text-align: center;
  }
  .center-div {
    display: inline-block;
  }

每种方法适用场景不同：

• 简单水平居中：方法1或6

• 完全居中：方法2或3

• 未知尺寸元素：方法4

• 需要兼容旧浏览器：方法5