<div class="box">
    <span>
      居中，居中，居中，居中，居中，居中,居中，
    </span>
</div>

    .box {
      background: red;
      width: 800px;
      height: 300px;
      /* 垂直居中 */
      line-height: 300px;
      /* 水平居中 */
      text-align: center;
    }
    .box > span {
      display: inline-block;
      /* 需要重新设置line-height，否则会继承父元素的值 */
      line-height: 2em;
    }

    .box > span {
      display: inline-block;
      /* 需要重新设置line-height，否则会继承父元素的值 */
      line-height: 2em;
      /* 设置文本垂直方向对齐方式为居中对齐 */
      vertical-align: middle;
    }

  <div class="box">
    <span>居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中,居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，居中，</span>
  </div>

    .box{
      background: red;
      width: 800px;
       /* 上下padding相等 左右padding相等 */
      padding: 100px 50px;
    }

    .box {
      background: red;
      width: 800px;
      height: 300px;
      /* display设为flex */
      display: flex;
      /* 水平居中 */
      justify-content: center;
      /* 垂直居中 */
      align-items: center;
    }
    .box > span {
      margin: 0 50px;
    }

    .box {
      background: red;
      width: 800px;
      height: 300px;
      position: relative;
    }
    /* 不定宽高、宽高固定都可用 */
    .box > span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .box {
      background: red;
      width: 800px;
      height: 300px;
      position: relative;
    }
    /* 宽高固定 */
    .box > div {
      position: absolute;
      width: 200px;
      height: 200px;
      background: gold;
      top: 50%;
      left: 50%;
      margin-left: -100px;
      margin-top: -100px;
    }

    .box {
      background: red;
      width: 800px;
      height: 300px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

  <div class="box6">
    <div>
    </div>
  </div>

    .box6 {
      background: red;
      width: 800px;
      height: 300px;
      /* 触发bfc 解决父子margin-top塌陷问题 */
      overflow: hidden;
    }
    .box6 > div {
      width: 200px;
      height: 200px;
      background: gold;
      /* 设置margin居中 */
      margin: 50px auto;
    }

.box7 {
      background: red;
      width: 800px;
      height: 300px;
      /* 父relative */
      position: relative;
    }
    .box7 > div {
      width: 200px;
      height: 200px;
      background: gold;
      /* 子absolute */
      position: absolute;
      /* 上下左右离父元素都为0 */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* 剩余空间都被上下左右的margin吸收 */
      margin: auto;
    }