隐藏元素的六种方式和两种垂直水平居中方式

1.使用display  

    none  隐藏  block 显示

   1.使用display none隐藏  block显示 
            注意：不能使用过渡效果，不占据空间*/
         .box{
            width: 50px;
            height: 50px;
            background-color:aqua ;
            display: none;
        }

2.opacity 透明度  

     1 显示 0 隐藏

        2.使用opacity透明度 1显示 0 隐藏 
              可以使用过渡效果 占据空间，不会让出原来的位置
          .box{
                width: 50px;
                height: 50px;
                background-color:aqua ;
                opacity: 0;
               } 

3.宽度/高度为0   配合overflow:hidden;使用

 3.宽度/高度为0 配合overflow:hidden;进行使用 
          /* 高度为0 */
           .box{
            width: 50px;
            height: 0;
            background-color:aqua ;
            overflow: hidden;
         }  
           /* 宽度为0 */
           .box{
            width: 0;
            height: 50px;
            background-color:aqua ;
            overflow: hidden;
         }  

4.visibility  

    hidden 隐藏  visible 显示

  4.visibility   hidden 隐藏   visible显示 
            占据空间，不会让出原来的位置，不可以使用过渡
            .box{
                width: 50px;
                height: 50px;
              background-color: aqua;
              visibility: hidden;
            }
            button:hover +.box{
                visibility: visible;
            } 

5.position 定位（不推荐用）

 5.position 定位
            不占据空间，可以使用过渡（不推荐使用） 
             .box{
                width: 50px;
                height: 50px;
              background-color: aqua;
                position:absolute ;
                top: -50px;
            } 

6.scale 缩放

      缩放不占用空间。可以使用过渡效果   0隐藏 >1放大 0~1缩小，<0会倒放

  6.scale 缩放不占用空间。可以使用过渡效果   0隐藏 >1放大 0~1缩小，<0会倒放 
              .box{
                width: 50px;
                height: 50px;
              background-color: aqua;
            transform: scale(0);
            } 

水平垂直居中（第一种方案）

 元素垂直水平居中方案 
        /* 第一种方案 */
        div{
            width: 500px;
            height: 300px;
            background-color: aqua;
           position: absolute;
            top: calc(50% - 150px);
            left: calc(50% - 250px);
        } 

水平垂直居中（第二种方案）

 /* 第二种方案 */
          div{
            width: 500px;
            height: 300px;
            background-color: aqua;
           position: absolute;
           margin: auto;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
        }