css垂直居中问题

案例1：

  <div class="center">
     <div class="aa">
        div居中
     </div>
  </div>
```css
  .center{
      width: 400px;
      height: 400px;
      border:1px solid red;
      position: relative;    
      .aa{
        position:absolute;
        border: 1px solid blue;
        width: 40px;
        height: 40px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)
      }
  }

案列2：

 <div class="parent">
        文字居中
  </div>
```css
  .parent{
      display: flex;
      width: 400px;
      height: 400px;
      border: 1px solid red;
      justify-content: center;
      align-items: center;
  }

案列3：

<div class="parent">
     <div class="child">
        errrwer
     </div>
  </div>
```css
  .parent{
      text-align: center;
      width: 400px;
      height: 400px;
      border: 1px solid blue;
      display: table-cell;
      vertical-align: middle;
      .child{
        display:inline-block;
        border: 1px solid red;
      }
  }