元素居中显示方法总结

• 块级元素居中显示

  • 在body中的某个元素(box1)

    .box1 {
      margin: 0 auto;
    }
    

  • 通过绝对定位在父容器里居中垂直显示

    // 方法一：
    .box1 {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    
    // 方法二：(更加简洁)
    .box1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    

  • 弹性盒模型（居中）

    // 可以给box1的父级元素设置为flex
    .xxx {
      display: flex;
      justify-content: center;
      align-items: center
    }
    

• 文字实现居中显示

  • 水平居中

    // 给父级块元素设置
    {
    	text-align: center;
    }
    

  • 垂直居中

    // 给父级块元素设置
    {
    	height: 50px;
    	line-height: 50px;
    }
    

有什么遗漏的或者错误的地方，请指正。共同学习、共同进步。