div在html的body中居中对齐（水平 垂直）

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>块居中</title>

<style>

    *{

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

     html,body{/*一定要有这个html的设置，否则 div不会垂直居中对齐*/

        height: 100%;

    }

    body{

        display: flex;

        height: 100%;

    }

    .box{

        width: 1050px;

        height: 600px;

        margin: auto;

        background-color: aqua;

       

        display: flex;

        justify-content: center;

        align-items: center;

       

    }

</style>

<div class="box">

    this is centerabbbcc

   

</div>