css居中常用的五种方法

对于前端开发者来说，CSS 居中是经常使用的技巧之一。本文将介绍 CSS 居中常用的五种方法。

1. 水平居中（text-align）

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

2. 垂直居中（line-height）

.parent {
      height: 200px;
      line-height: 200px;
}
.child {
      display: inline-block;
      vertical-align: middle;
}

3. 绝对定位居中（top, left, transform）

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

4. 弹性盒子居中（flex, justify-content, align-items）

.parent {
      display: flex;
      justify-content: center;
      align-items: center;
}
.child {
  /* 可以为空 */}

5. 网格布局居中（grid, justify-content, align-items）

.parent {
      display: grid;
      justify-content: center;
      align-items: center;
}
.child {
  /* 可以为空 */}
    

以上就是 CSS 居中常用的五种方法。开发者可以根据具体情况选用不同的方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！