简单梳理下水平居中和垂直居中的实现方法

1. div盒子中文字的水平和垂直居中
水平居中：text-align: center;，可继承，父盒子设置了该属性值，子盒子中的文字也是水平居中的。
垂直居中就让包含文字盒子高度和文字行高设置成相等的。

div{
 text-align: center; 
 height: 100px;
 line-height: 100px;
}

2. 块级元素的水平和垂直居中
设计了两个盒子，father和son，实现son盒子在father盒子中的居中。
（1）只利用margin和padding
水平居中：很简单，给son盒子设置margin

.son{
 width: 200px;
 border: 1px solid blue;
 margin: 0 auto;
}

记得要先给子元素设置一个宽度,若不设置宽度，会默认继承父盒子的宽度，自然达不到在父盒子内居中的效果。
垂直居中：不给父盒子设置高度，给父盒子设置上下padding

.father{
 width: 400px;
 border: 1px solid red;
 padding: 100px 0;
}

（2）利用line-height和vertical-align
由上面已知，当height和line-height相等时，文字就会居中，但这只适合单行文本，当文本不是单行时，文本内容就会跑到div盒子外。为了解决这个问题，实现多行文本的垂直居中，用div或p元素把文字包含起来，并设置新的line-height覆盖从父类继承的line-height，然后再利用vertical-align:middle属性垂直居中。

.father{
 width: 400px;
 text-align: center; 
 height: 100px;
 line-height: 100px;
 border: 1px solid red;
}
.son{
  line-height: 2;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid blue;
}

（3）利用定位：子绝父相
子盒子用绝对定位，父盒子用相对定位，简称：子绝父相。
子盒子相对父盒子，top和left各设置50%，表示把子盒子的左上角设置到父盒子中心了，要想子盒子本身在父盒子中心，需要往上移动自身盒子高度的一半，往左移动自身宽度的一半。

.father{
  width: 400px;
  height: 100px;
  border: 1px solid red;
  position: relative;
}
.son{
  width: 200px;
  height: 50px;
  border: 1px solid blue;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -100px;
}

上面这种方法适用于已知子盒子的宽度和高度，当不确定这两个属性值时，就需要用到另一个属性值。

.father{
  width: 400px;
  height: 100px;
  border: 1px solid red;
  position: relative;
}
.son{
  width: 200px;
  height: 50px;
  border: 1px solid blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

transform: translate(-50%, -50%);是以左上角为原点，往上和左移动自身高宽的一半。

（4）利用弹性布局flex
justify-content: center;设置水平居中；align-items: center;设置垂直居中

.father{
  width: 400px;
  height: 100px;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 50px;
  border: 1px solid blue;
}

后面想到其它方法，我再继续补充