关于css的几个水平居中

第一种

用margin 0 auto来实现水平居中

 .first {
        width: 200px;
        margin: 0 auto;
        background-color: aqua;
      }

还可以用text-align:center来实现水平居中 ，这里就不写了

第二种

第二种使用定位和偏移量来进行水平居中设置，

 .second{
      position:absolute;
      width:200px;
      height:200px;
      left:50%;
      right:50%;
      tranform:translate(-50%);
      background-color: aqua;
 }

第三种

将盒子属性设置为绝对定位,margin设置为auto

  .thrid {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: aqua;
    }