CSS布局，div居中，文字居中

.main {
  width: 100%;
  margin: 0 auto;

  .banner {
    img {
      width: 100%;
    }
  }

  .article {
    margin-bottom: 100px;
    .title {
      margin-top: 80px;
      font-size: 36px;
      font-weight: 500;
      text-align: center;
    }

    .sub-title {
      margin-top: 26px;
      font-size: 18px;
      font-weight: 400;
      text-align: center;
      color: #999999;
    }

    .slogan {
      // 宽高
      width: 1000px;
      height: 82px;
      // 布局
      margin: 0 auto; /* div水平居中 */
      margin-top: 30px;
      text-align: center; /* 文字居中 */
      line-height: 82px; /* 文字就垂直居中了 */
      // 字体
      font-size: 18px;
      font-weight: 500;
      // 其他
      border-left: 1px solid #E6E6E6;
      border-right: 1px solid #E6E6E6;
      border-top: 1px solid #E6E6E6;
      border-bottom: 4px solid #222222;
    }

    .content {
      width: 1000px;
      margin: 0 auto; /* div水平居中 */
      margin-top: 60px;
      font-size: 16px;
      font-weight: 400;
      color: #555555;
      line-height: 32px;
      p {
        text-indent: 30px; /* 文本缩进 */
      }
    }
  }
}

div居中

margin: 0 auto; /* div水平居中 */

文字居中

text-align: center; /* 文字居中 */

文字垂直居中

line-height: xxxpx; /* 文字就垂直居中了 */