CSS 总结

elem {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

elem {
  margin: 0 auto;
  width: 50%;
}

/* inline, inline-* 元素 */
.text {
  text-align: center;
}

/* 块级元素 需要指定宽度，前2个也是块级元素居中样式 */
img {
  display: block;
  margin: 0 auto;
}
/* 多个块级元素排成一列横排 需要水平居中
main > div
.inline-block-center(main), .flex-center(main)
1. 设置好标准的 div 元素样式
*/
.inline-block-center {
  text-align: center;
  div {
    display: inline-block;
    text-align: left;
  }
}
.flex-center {
  display: flex;
  justify-content: center;
}
/* 多个块级元素排成一列竖排
main > div
*/
main div {
  margin: 5px auto;
}
/* 之后一定要指定每个 div 元素的宽度 */

/* inline, inline-*, 文本、链接等 */
  /* single line */
  .center-single-line-vertically {
    padding: 50px 0;
  }
  .center-single-line-vertically {
    height: 100px;
    line-height: 100px;
    white-space: nowrap;
  }
  /* multiple lines */
  .center-multiple-lines-vertically {
    padding: 50px 0;
  }
    /* 如果对多行设置 padding 无效，使用以下办法 */
  .center-multiple-lines-vertically {
    display: table;
    height: 350px; /* 大于文字高度*/
    p {
      display: table-cell;
      margin: 0;
      vertical-align: middle;
    }
  }
  .center-multiple-lines-vertically {
    display: flex;
    justify-center: center;
    flex-direction: column;
    height: 300px; /* 大于文字高度 */
  }
  .center-multiple-lines-vertically {
    position: relative;
    &::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
    }
    p {
      display: inline-block;
      vertical-align: middle;
    }
  }
/* 块级元素的垂直居中 */
  /* height 已知 */
  /* https://codepen.io/chriscoyier/pen/GRBVOj */
  .center-vertically {
    position: relative;
    .child {
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -70px; /* box-sizing 非 border-box 的解决办法 */
    }
  }
  /* height 未知 */
  .center-vertically {
    position: relative;
    .child {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  /* 元素高度拉伸到父元素 */
  .center-vertically {
    display: table;
    height: 300px;
    div {
      display: table-cell;
      vertical-align: middle;
    }
  }
  /* 与前文多行居中相同，使用 Flexbox */
  .center-vertically {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
    /* 或者这样写 */
    .center-vertically {
      display: flex;
      .child {
        margin: auto 0;
      }
    }