CSS水平垂直居中

1.利用定位（Position）

2.定位(position)与位移(translate)

//html
  

      

      
  
//css
   .parent{
            width:300px;
            height:300px;
            background-color: red;
            position: relative;
        }
        .child{
            width:100px;
            height:100px;
            background-color: pink;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }

3.定位

 //HTML
     

         

         
     
 //css
      .one{
            width:400px;
            height:400px;
            background-color: red;
            position: relative;
           }
        .two{
            width:100px;
            height:100px;
            background-color: pink;
            position: absolute;
            margin:auto;
            left:0;
            top:0;
            bottom:0;
            right:0;

        }

.