CSS之水平垂直居中

如何实现一个div的水平垂直居中

   <div class="content-wrapper">
      <div class="content">content</div>
    </div>

1. flex布局

 .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      display: flex;
      justify-content: center;
      align-items: center;
 }

2. transform

 .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      position: relative;
    }
    .content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

3. 定位

 .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      position: relative;
    }
    .content {
      width: 60px;
      height: 20px;
      position: absolute;
      left: 170px;
      top: 190px;
    }

4. 计算距离

 .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      padding-top: 190px;
      padding-left: 170px;
      box-sizing: border-box;
    }
    .content-wrapper .content {
      width: 60px;
      height: 20px;
    }

5. display:table-cell

  .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      display: table-cell;
      vertical-align: middle;
    }
    .content-wrapper .content {
      width: 100%;
      height: 20px;
      text-align: center;
    }

6. line-height

  .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      line-height: 400px;
    }
    .content-wrapper .content {
      width: 100%;
      height: 20px;
      text-align: center;
    }

7. margin: auto

  .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      position: relative;
    }
    .content {
      width: 60px;
      height: 20px;
      margin: auto;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }