水平居中

1. text-align: center

在块级父容器中，让行内元素(或者类行内元素)居中，只需使用 text-align: center，

类行内元素: inline/inline-block/inline-table/inline/flex

.parent {
  text-align: center;
}

.child {
  display: inline-block;
  /* 文本会继承child类的居中，需要取消文本居中 */
  text-align: left;
}

当子节点中出现多个行内元素的时候，每个子节点之间会有缝隙，这不是 bug，因为文本文字之间就需要缝隙。

去除办法：

(1) 在父元素(容器)中设置 font-size: 0 可以去除缝隙

.parent {
  font-size: 0;
}
.chilc {
  /* 注意子元素恢复 */
  font-size: 16px;
}

(2) 使用 letter-spacing 或者 word-spacing

2. margin:0 auto

子元素需要为块级元素，但需要设置 width。

table 元素 width 由内容决定

.child {
  display: table;
  margin: 0 auto;
}

3. transform

子绝父相

absolute 元素 width 由内容决定

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%; /*absolute定位参照物是父容器*/
  transform: translateX(-50%); /*百分比的参照物是自身*/
}

如果子元素宽度知道，也可以把 translateX 换成 margin-left 负边距(偏移自身一半)

4. justify-content:center;

flex 容器

不兼容 IE10 以下

.parent {
  display: flex;
  justify-content: center;
}