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

  * {
    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%);
  }



  这是一行文字

实现效果

参考 水平居中和transform: translateY(-50%) 实现元素垂直居中效果