第一种方法定位

绝对定位

• 子盒子加magin子盒子的一半 必须要有宽高

             width: 200px;
             height: 200px;
             position: absolute;
             top: 50%;
             left: 50%;
             margin-top: -100px;
             margin-left: -100px;

• 子盒子使用transform 不用定宽高

               position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
        
  

• 子盒子margin auto

             position: absolute;
               top: 0;
               left: 0;
              right: 0;
              bottom: 0;
              margin: auto;

第二种flex

1. 一个盒子父盒子

   display:flex;
   justify-content:center;
   align-items:center

2. 父盒子

   display:flex;
   

子盒子

 margin:auto

3. 父盒子

   display:flex;
   justify-content:center
   

子盒子
```css
    align-self:center;
```

第三种 vertical-align

1. 父盒子

               vertical-align: middle;
               display: table-cell;
               text-align: center;
                

子盒子

    display: inline-block;

2. 父盒子

             text-align: center;
             line-height: 400px;

子盒子

            display: inline-block;
            vertical-align: middle;

3. 父盒子

    text-align: center;

子盒子

            div:nth-child(9) div {
                display: inline-block;
                vertical-align: middle;
            }
            div:nth-child(9)::after {
                content: '';
               display: inline-block;
               vertical-align: middle;
               height: 100%;
               width: 0;
            }