css水平垂直居中5种方式实现

<style>
  /* .demon{
    width: 200px;
    height: 200px;
    border:1px solid #e9e9e9;
    position: relative;
  }
  .hart{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 80px;
    height: 80px;
    background: blueviolet;
  } */
  /* .demon{
    width: 200px;
    height: 200px;
    border: 1px solid pink;
    display: grid;
  }
  .hart{
    margin: auto;
  } */

  /* .demon{
    width: 200px;
    height: 200px;
    border: 1px solid greenyellow;
    position: relative;
  }
  .hart{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  } */
  /* .demon{
    width: 300px;
    height: 300px;
    border: 1px solid #666999;
    position: relative;
  }
  .hart{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    left: 50%;
    top: 50%;
    margin: -50px 0  0 -50px;
  } */
  .demon{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
</style>

 <div class="demon">
    <div class="hart">今天天气不错</div>
  </div>