html----怎样实现元素的垂直居中

  
//使用弹性盒
  #box {
      width: 200px;
      height: 400px;
      background: lightblue;
      display: flex;
      align-items: center;

    }

    .con1 {
      width: 100px;
      height: 100px;
      background: lightpink;
    }

<style>
    #box {
      width: 200px;
      height: 400px;
      background: lightblue;
      position: relative;

    }

    .con1 {
      width: 100px;
      height: 100px;
      background: lightpink;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
    }
  </style>

 <style>
    #box {
      width: 200px;
      height: 400px;
      background: lightblue;
      position: relative;
    }

    .con1 {
      width: 100px;
      height: 100px;
      background: lightpink;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>