div设置垂直水平居中的几种方法

html样式

        --------children相对于box水平垂直居中

        <div class="box">

                <div class="chidren></div>

        </div>

css样式

方法一:

    .box {

                width:500px;

                height: 500px;

                border:3px solid pink;

                position: relative;

       }

.children {

            width:100px;

            height: 100px;

            background-color: skyblue;

            position: absolute;

            left:50%;

            top:50%;

            transform:translate(-50%,-50%);

      }

方法二:

    .box {

            width:500px;

            height: 500px;

            border:3px solid pink;

            position: relative;

    }

    .children {

            width:100px;

            height: 100px;

            background-color: skyblue;

            position: absolute;

            left:0;

            top:0;

            right:0;

            bottom:0;

            margin: auto;

}

方法三:

    .box {

            width:500px;

            height: 500px;

            border:3px solid pink;

            display: flex;

            align-items: center;

            justify-content: center;

    }

    .children {

            width:100px;

            height: 100px;

            background-color: skyblue;

}