CSS实现div居中的五种方式

方法一：margin：0 auto；--水平居中

.box1 {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: pink;
        } 

方法二:position+left+right+top+bottom--水平垂直居中

.box2 {
            position: absolute;/*当为relative时为水平居中*/
            width: 100px;
            height: 100px;
            margin: auto;
            left: 0;
            bottom: 0;
            top: 0;
            right: 0;
            background-color: pink;
}

方法三：position+left+top+margin--水平垂直居中

.box3 {
            position: absolute;
            height: 100px;
            width: 100px;
            top: 50%;
            left: 50%;
            /* 自身高度一半的负值 */
            margin-top: -50px;
            /* 自身宽度一半的负值 */
            margin-left: -50px;
            background-color: pink;
        }

方法四：position+transform--水平垂直居中

 .box4 {
            position: absolute;
            height: 100px;
            width: 100px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: pink;
        }

方法五：display:flex--水平垂直居中

   .box5 {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            /* 设置垂直居中 */
            align-items: center;
            /* 设置水平居中 */
            justify-content: center;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
   .box5 .item {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

注意：当使用display：flex;以body为父级进行水平垂直居中时，需要加上position：absolute；width，height配合使用；普通div不用,加上margin，padding依旧居中