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>      

實作效果

參考

水準居中和transform: translateY(-50%) 實作元素垂直居中效果