关于css居中的三种常见方式

父盒子的position统一默认relative

1、flex盒子(不考虑兼容)

.box {
      display: flex;
      align-items: center;
      justify-content: center;
    }

2、css3偏移(不考虑兼容)

不需要设置宽高

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

3、原生(可兼容)

不考虑宽度和高度，但必须有宽高

.box {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

需要考虑宽高

.box {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -自身高度的一半
      margin-left: -自身宽度的一半
    }

 

2020/7/14

记录一下今天刚发现的另一种方式，通过Javascript来居中

方法：父盒子设置relative定位。获取屏幕宽高，获取盒子宽高，将盒子的style的top/left设置成（屏幕宽高-盒子宽高）/2+"px"，即可实现。