css让div居中的几种方法

参考资料

1. 结构伪类选择器详细说明以及案例
2. display: flex/inline-flex示例
3. css阴影效果属性有哪些,
4. 如何添加按钮的过渡动画效果？
5. css怎么使div居中
6. 有没有现成的Vanta.js与CSS过渡模板？
7. CSS定位详细说明以及案例
8. css阴影颜色怎么设置

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