CSS 水平&垂直居中 总结

水平居中

1. inline元素（或者 inline-block 或者 text节点）：
text-align: center （设置父元素）

2. block元素：
margin: auto

3. absolute元素：
left: 50% + margin-left 负值

4. absolute元素：
left: 50% + transform: translateX(-50%) // 不确定定位元素尺寸可用，transform是CSS3属性请考虑兼容性

5. flex元素：
flex-direction: row + justify-content: center // 主轴方向是 row
flex-direction: column + align-items: center // 主轴方向是 column

垂直居中

1. inline元素：
line-height值 等于 height值 （父元素设置 || 直接设置文本元素如包含文本的div）

2. absolute元素：
top: 50% + margin-top 负值

3. absolute元素：
top: 50% + transform: translateY(-50%) // 不确定定位元素尺寸可用，transform是CSS3属性请考虑兼容性

/* 垂直居中 */
.center {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
/* 水平 && 垂直居中 */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. absolute元素：
top, left, bottom, right:0 + margin: auto // 不确定定位元素尺寸可用，但定位元素尺寸必须设置。无兼容性问题

/* 水平 && 垂直居中 */
.center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  /* 尺寸必须设置 */
  width: 100px;
  height: 100px;
}
/* 说明 */
/*
margin：auto 默认只会计算左右边距。而上下如果设置为 auto 时默认是取 0
也就是说，margin：auto 和 margin：0 auto 在一般情况下没有区别，不能实现垂直居中。
但是有了绝对定位后，margin-top 和 margin-bottom 的值就不是0了，是通过计算所得,所以能实现垂直居中。
*/

5. flex元素：
flex-direction: row + align-items: center // 主轴方向是 row
flex-direction: column + justify-content: center // 主轴方向是 column