CSS元素水平垂直居中

一、块级元素相对于body水平垂直居中

1.最简单的，body设置display:flex，div设置margin:auto

    html,body {
        width: 100%;
        height: 100%;
    }
    body{
        display: flex;
    }
   .test{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        margin: auto; 
   }

2.body不做属性设置，只修改div

    .test {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 500px;
      background-color: aqua;
    }

二、在一基础上块级元素子盒子相对于父盒子水平垂直居中

1.

    html,body {
        width: 100%;
        height: 100%;
    }
    body{
        display: flex;
    }
   .test{
        position: relative;
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        margin: auto; 
   }
   table {
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
   }

效果如图：

 

 

2.

    .test {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 500px;
      background-color: aqua;
      //让子元素水平垂直居中
      display: flex;
      justify-content: center;   /* 默认主轴为x轴，实现水平居中 */
      align-items: center;      /* 实现垂直居中 */
    }

效果如图：