居中完全指南

一、水平居中

1. 所有inline元素（包括inline-block），如文本等：text-align:center
2. 单个block元素：margin: 0 auto (需要确定的宽度)
3. 多个block元素：（两种解决方案）
   a.父级元素：text-align:center，子集元素：display:inline-block
   b.父级元素：display:flex; justify-content: center;

二、垂直居中

1. inline元素（分为两种情况）
   a.单行：设置上下padding相同或者将line-height设为height的值
   b.多行：
   使用padding可以达到效果，若不能，说明父元素为table，无论是语义上的还是css设置的。此时，使用vertical-align:middle或者flex。但是会存在一个问题，这两种解决方案都会使所要垂直的元素高度最大化，充斥在父元素内。
   以上方案若没有效果，采取最后一种方案

.father {
  position: relative;
}
.father ::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center son {
  display: inline-block;
  vertical-align: middle;
  width: 190px;
  margin: 0;
  padding: 20px;
  background: black;
}

2. block
   a.确定高度或不确定高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 高度的一半 */
  //如果不确定高度，采用下列属性
  transform: translateY(-50%);
}

b.使用flex

水平垂直居中

1. 已知高度（方法同block已知高度垂直居中）
2. 未知高度（同上）
3. flex