参考资料

  1. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法
  2. 动态伪类选择器详细说明以及案例
  3. 边框属性详细说明以及案例
  4. css怎么使div居中
  5. css3阴影效果
  6. 如何编写CSS代码？
  7. 如何用Flex布局制作响应式布局？
  8. 详细说明：justify-content: flex-start/end

  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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。