元素居中顯示方法總結

• 塊級元素居中顯示

  • 在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;
    }

有什麼遺漏的或者錯誤的地方，請指正。共同窗習、共同進步。