transform: translateY(-50%)实现垂直居中效果

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .center {
    width: 960px;
    height: 500px;
    margin: 0 auto;
    background: #1879d9;
  }
  .center p {
    background: #fff;
    position: relative;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100px;
    /* 让div 沿Y轴平移自身高度的一半 */
    transform: translateY(-50%);
  }
</style>
<div class="center">
  <p>这是一行文字</p>
</div>